有没有办法计算所有 DOM 元素的堆叠上下文，以便使用 JavaScript 比较上述位置的任意两个元素？

Question

我试图比较 DOM 中的任意两个元素，看看它们是否要在同一区域（坐标重叠）中绘制（在屏幕上渲染），其中一个元素会在另一个元素之上。这个问题不是关于重叠计算，而是关于比较 DOM 树任何部分的任何两个元素的上述位置（计算堆叠上下文和 z-index 和 HTML 层次结构......）。

虽然我是这个领域的新手，但我的方法是遍历每个 HTML 元素并为其分配一个数值，同时考虑到规则和标准。另一个问题是如何正确地获取它们。我找不到已经做到这一点的 JS 库。

有关 CSS 和完整代码示例，请参阅... https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

预期输出是能够比较任意两个 HTML 元素的上方或下方位置 (3D)。如果我从这里的专业人士那里得到一个想法并且能够实现它，我将分享我的代码。谢谢任何帮助。

Answer 1

npm 上有一个名为 的包stacking-order正是这样做的。

您可以使用以下命令安装它：

$ npm install stacking-order

import stackingOrder from 'stacking-order';

或在脚本标记中使用https://npmcdn.com/stacking-order 。

<script src="https://npmcdn.com/stacking-order"></script>

然后，要找到您要查找的内容，只需致电stackingOrder.compare(element1, element2)

const element1 = document.querySelector('#element1');
const element2 = document.querySelector('#element2');

const order = stackingOrder.compare(element1, element2);

if (order === 1)
    console.log('element1 is above element2`)
else
    console.log('element1 in under element2')