我正在编写一个使用javascript来完成将HTML文档转换为SVG的工具。
这需要知道哪些元素可以与其他元素重叠，从而知道整个文档的整体z-index堆叠顺序。
所以我想为源页面中的每个元素分配一个数字，这样如果我将所有元素重新排列为彼此重叠，则数字将反映它们在该堆栈中的位置，其中1表示顶部（或底部），2成为下一个，等等。
这当然受z-index值的影响，但与它们没有直接关系。
我知道有一种方法可以自己使用仔细的DOM遍历和排序，但这会很棘手。
现有方法是否更容易？
我可以使用任何必要的库，但了解如何在vanillaJS中执行它会有所帮助。
谢谢！
编辑：当我调查自己时，绘画顺序上的CSS条目位于https://www.w3.org/TR/CSS21/zindex.html，在http://vanseodesign.com/css/css-stack-z-index/进行了健康的讨论
答案 0 :(得分：3)
未经考验的想法：
transform: translate()样式按摩整个DOM树，直到所有可见元素以其边界框在特定点重叠的方式堆叠，例如在文档的左上角。 document.elementFromPoint pointer-events:none;设置元素的样式，这会将其排除在元素检索这应该给你总排序。
答案 1 :(得分：1)
老实说，这很难回答你说：
这当然受z-index值的影响，但与它们没有直接关系。
但是，如果我只是回答标题中的问题：
确定DOM中每个元素的有效z-index（垂直堆栈位置）？
如果您知道元素的id（或名称），那么获取zIndex相对容易，因为您可以获得任何dom元素的z-index：
document.getElementById('someID').style.zIndex;
对于任何其他答案，您需要缩小要求范围。