是否有一种方法可以计算所有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

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

Answer 1

npm上有一个名为package的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')