z-index 的子级：'auto' vs z-index: 0，CSS 中的“堆叠上下文”是什么？

Question

以前，我认为子元素的 z-index 不能超过其父元素的兄弟元素的 z-index 比其父元素高的元素。例如，div A 和 B 是兄弟姐妹。 Div A 的 z-index 为 10，div B 的 z-index 为 5。Div B 有一个子元素：Div C，z-index 为 9999。据我了解，div C 不会位于div A 上方，因为div C 的父级(div B) 的z-index 低于div A。这是正确的，除非div B 的 z-index 为“auto”。当div B 的 z-index 为“auto”时，即“0”，因为它是从 body 继承的，div C 的位置高于 div A，即使 div B 的 z-index 实际上是 LOWER 比它不工作的时候。

根据 CSS2 规范，z-index 'auto' 定义为

生成的box在当前stacking context中的stack level为0，box不会建立新的stacking context，除非它是根元素。

我在理解“stacking context.”时遇到了麻烦。这似乎是定义的 z-index 为 0 和默认为 0 但也有没有堆叠上下文。更具体地说：

为什么没有堆叠内容的元素的子元素的 z 索引与堆叠上下文中的元素的 z 索引不同？

这是一个小提琴，它显示了 z-index 为 0 和 z-index 为 auto 之间的区别。绿色 div 是蓝色 div 的孩子，红色 div 是蓝色 div 的兄弟。

http://jsfiddle.net/c7Tvt/

Answer 1

在您的示例中，您有两个场景，分别称为 Blue 和 Blue-2。

在 Blue 中，您有两个堆叠上下文，第一个包含 #blue，第二个包含 #red 和 #green。因为z-index: auto，#blue 在它自己的堆栈上下文中，并且这个上下文只是默认堆栈的一部分。

在 Blue-2 中，您为 #blue 定义了 z-index: 0，因此它与 #red 属于同一堆栈上下文的一部分。在 Blue-2 中，首先绘制 #blue，因为它的 z-index 最低，为 0。但是，#green 是 #blue 的子代并被绘制在 #blue 之上，父子代形成一个新的堆叠上下文（如果您愿意，可以使用子堆叠上下文）。 最后，#red 被绘制在蓝绿色堆栈上，因为红色 z-index 为 2，大于蓝色 z-index 0。在这种情况下，绿色的 z-index 影响其堆叠级别到蓝色和#blue 中的任何其他子元素。在 Blue-2 中，共有三种堆叠上下文，默认 (#1)、红色和蓝色 (#2) 以及蓝色和绿色 (#3)。

关键点
z-index: auto 不会开始将定位元素添加到新的堆叠上下文中，而z-index: 0 会。请记住，至少有一个堆叠上下文，这是根据元素在页面上的自然 HTML/DOM 顺序为元素定义的默认上下文。

注意：我冒昧地描述了质押位置，就好像你有两个网页一样，一个是#red，#blue，#green，第二个是#red2， #blue2，#green2。实际上，由于所有 div 都在同一个页面上，因此所有堆叠级别都包含所有元素。当同一堆栈中有两个红色 div 时，#red2 将被绘制在 #red 上，因为 DOM 树下方的元素被绘制在较早的元素上。

参考
我发现以下内容非常有用：
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_2

如果您想了解更多详情，请尝试查看：
http://www.w3.org/TR/CSS21/zindex.html