Javascript 确定DOM中每个元素的有效z索引（垂直堆栈位置）？

我正在编写一个工具，它使用javascript来做一些事情，比如将HTML文档转换为SVG

这需要知道哪些元素可能与其他元素重叠，从而知道整个文档的总体z索引堆叠顺序

因此，我想给源页面中的每个元素分配一个数字，这样，如果我重新排列所有元素，使它们彼此重叠，那么这个数字将反映它们在堆栈中的位置，1是顶部（或底部），2是下一个，以此类推

这当然受z指数值的影响，但与它们没有直接关系

我知道有一种方法可以通过仔细的DOM遍历和排序来实现这一点，但这会很棘手

有没有更容易的现有方法

我可以使用任何必要的库，不过了解如何在vanillaJS中使用会有所帮助

谢谢

---

编辑：当我研究自己的作品时，关于绘画顺序的CSS条目位于，在

上有一个健康的讨论。老实说，这是一个很难回答的问题，你说：

这当然受z指数值的影响，但与它们没有直接关系

但是，如果我简单地回答标题中的问题：

确定DOM中每个元素的有效z索引（垂直堆栈位置）

如果您知道元素的id（或名称），那么获取zIndex就相对容易，因为您可以通过以下方式获取任何dom元素的z索引：

document.getElementById('someID').style.zIndex;

对于任何其他答案，您需要缩小您的要求。

未经测试的想法：

使用CSS

transform:translate（）

styles对整个DOM树进行调整，直到所有可见元素以其边界框在特定点重叠的方式堆叠，例如在文档的左上角

使用document

document.elementFromPoint

使用

指针事件设置元素样式：无，这将其从元素检索中排除

转到2

---

这应该会给你总的顺序。

我有一个疯狂的想法，就是实际操作元素，使它们重叠，然后触发一个点击事件，观察它是如何在它们之间冒泡的，但确保它们都重叠而不改变它们的相对z索引并不是一件小事。不过，我当然会接受这样的建议。你到底想做什么，为什么需要这些信息？我正在尝试将HTML转换为不同的HTML结构，这样每个元素通常都是绝对独立的，就像在SVG或PSD文档中一样。这允许将任何HTML导入到基于HTML的原型工具中。最简单的方法是将HTML转换为SVG，然后再转换回HTML。这其实不是一个疯狂的想法，但似乎有点过分，会增加它自己的问题。正如你所描述的问题是无法解决的，你不能模仿隐藏溢出，例如，只使用独立的绝对定位元素。我不确定你在说什么。显然，这是一个已解决的问题，地球上的每个web浏览器都正确地确定了元素的视觉堆叠顺序。很明显，有些案例无法正确翻译，这很好。我只是想知道是否有人知道确定javascript中相对堆叠顺序的代码。我目前正在研究开源浏览器，但这可能需要大量的代码；给定元素的“z-index”CSS属性不是页面绘制顺序中的有效z-index。在绘制顺序算法的许多点中都清楚地考虑到了这一点，但我所说的是实际的z索引绘制顺序，z索引CSS属性用于计算。考虑好，我没有考虑翻译和不知道元素从点。我要试试这个。谢谢那可能是赢家。我需要小心设置转换，因为转换父元素也会自然地移动子元素，所以我必须转换根元素，然后递归到它们的子元素，转换它们，然后递归到它们的子元素，等等。我还需要打破svg元素的递归，至少是其他元素。但是到目前为止非常有希望，我想我可以做到。谢谢你搞定了。非常好用！我已经将代码上传到，并将继续测试它，但现在使用当前的测试数据，它正在做我希望它做的事情。