如何从 querySelectorAll 的结果中判断一个元素是否高于另一个元素答案

【问题标题】：How do you tell if one element is above another from results from querySelectorAll如何从 querySelectorAll 的结果中判断一个元素是否高于另一个元素
【发布时间】：2016-12-30 18:51:18
【问题描述】：

如何根据 querySelectorAll 的结果判断一个元素是否高于另一个元素（例如在计算完所有 z 索引之后）。

【问题讨论】：

不要认为有一个简单的解决方案或一些您可以使用的浏览器 API。您可能必须编写与渲染引擎相同的逻辑，因此请考虑 z-index（以及随之而来的规则），然后是 html 元素的顺序和结构。你到底想完成什么？
您可以使用stackoverflow.com/questions/18780139/… 做一些事情，并检查任何选定项目的边界框是否相交。这不会给你订单，但你可以消除那些甚至不靠近彼此的订单。这就是一些 2D 游戏的工作原理，因此搜索边界框可能会得到一些与游戏相关的结果。
@MarkoGrešak 你认为我可以只使用树的深度吗？
这个帖子可以查一次stackoverflow.com/questions/4230029/…
@SuperUberDuper 感谢您提出这个问题 :) 我已将我的评论改写为答案。

标签： javascript css

【解决方案1】：

不要认为有一个简单的解决方案，因为您可以调用浏览器 API 并获取元素“z-height”。

您可以通过类似于渲染引擎的工作方式来解决这个问题，即根据 DOM 树的深度将元素一层一层地堆叠起来。然后还有 CSS 引擎，它根据标签类型和 CSS 中的特殊规则改变元素位置，例如 z-index、特殊位置属性（relative、absolute 等）甚至 CSS“怪癖”，用于例如z-index + opacity 改变了元素的堆叠方式。

根据您的目标，您可以简化解析并忽略 CSS 所做的事情，只考虑 HTML。那里有 DOM API，它使遍历树结构变得非常容易，并且 DOM 渲染引擎将处理所有错误但仍在工作的标记的奇怪情况。

【讨论】：

【解决方案2】：

如果你可以使用jQuery，请检查

$(element).css("z-index");

【讨论】：