z-index 和 DOM 层次结构是否需要相互对齐？

Question

我有这样的代码（divs 有绝对位置并且至少部分重叠）：

<div style="z-index: 1">
    <div style="z-index: 3">
    </div>
</div>
<div style="z-index: 2">
    <div style="z-index: 4">
    </div>
</div>

它似乎在我需要的浏览器中工作正常，但不知何故感觉不对。所以我的问题是：我应该考虑另一种方法还是这种技术是完全合法的？

Answer 1

在 CSS 中，z-index 值与堆叠上下文相关，这在一定程度上依赖于层次结构。

由于您所有的 div 都是绝对定位的并且具有非自动的 z-index，因此它们中的每一个都为其后代建立了一个堆叠上下文。所以第一个内部 div 参与第一个外部 div 的堆叠上下文，它的 z-index 是相对于那个堆叠上下文的。同样，第二个内部 div 参与第二个外部 div 的堆叠上下文，其 z-index 是相对于该堆叠上下文的。

因为它们被限制在它们自己的父堆栈上下文中，所以两个内部 divs 都不知道对方。换句话说，无论你为一个内部 div 设置什么 z-index 都不会对另一个产生影响。

然而，假设其他一切都是默认的，两个外部 divs 参与同一个父堆栈上下文，所以第二个可以说具有更高的 z-index（或更高 stack level) 而不是第一个，交换它们的 z-index 值确实会导致具有较高堆栈级别的那个出现在具有较低堆栈级别的前面。

所有这些都在 section 9.9 of CSS2.1 中明确定义，并且可以依赖，尽管存在错误。

z-index 和 DOM 层次结构是否需要相互对齐？

Do z-index and DOM hieararchy require mutual alignment?

html

css

dom

z-index