html - 通过实际 z-index 比较 HTML 元素

Question

给定同一文档中的两个任意 HTML 元素 A 和 B，我如何找出哪个元素“更接近”用户(即，如果它们重叠，哪个元素会遮挡另一个元素)？

W3C CSS Specification描述了兼容渲染引擎应该实现的堆叠上下文。但是，我找不到在 JavaScript 程序中访问此信息的方法，无论是否跨浏览器。我所能读到的只是 css z-index 属性，它本身并没有说明太多，因为大部分时间都设置为 auto 或者，即使表示为一个数值，并不是它实际显示方式的可靠指标(如果它们属于不同的统计上下文，则比较 z-index 是无关紧要的)。

请注意，我对任意元素感兴趣:如果两个元素都在鼠标指针下方，则只有一个元素会被视为“悬停”，因此在这种情况下我可以轻松找到最接近的元素.但是，我正在寻找一种更通用的解决方案，最好是不涉及重新实现渲染引擎已经在执行的堆叠算法的解决方案。

更新:让我澄清一下这个问题背后的原因:我最近解决了 a question这暴露了 jQuery 拖放机制的局限性——它在放置时不考虑 z-index，因此如果一个元素遮挡了另一个元素，它仍然可以在“后面”的元素中执行放置操作。虽然针对 OP 特定案例回答了链接问题，但普遍问题仍然存在，据我所知没有简单的解决方案。

alex's answer below 很有用，但对于手头的情况还不够:拖动时，被拖动的元素本身(或更准确地说是它的助手)是鼠标光标下的最上面的元素，因此 elementFromPoint 将返回 它 而不是我们真正需要的下一个 最顶层元素(解决方法: style the cursor 所以它被放置在助手之外)。 jQuery 使用的其他交集策略也不仅仅考虑一个点，这使得确定以某种方式与 helper 相交的最顶层元素的任务变得复杂。能够按实际 z-index 比较(或排序)元素将使“z-index 感知”交集模式在一般情况下可行。

Answer 1

您可以获得元素的尺寸和偏移量，然后使用 document.elementFromPoint()以确定哪个是在顶部呈现的元素。