8

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

从 CSS2 规范中，z-index 'auto' 定义为

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

我无法理解“堆叠上下文”。这似乎是定义的 z-index 为 0 和默认为 0 但也没有堆叠上下文的“自动”之间的唯一区别。进一步来说：

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

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

http://jsfiddle.net/c7Tvt/

4

1 回答 1

4

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

在 Blue 中，您有两个堆叠上下文，第一个 contains#blue和第二个 contains #redand #green。 #blue位于其自己的堆栈上下文中，因为z-index: auto, 并且此上下文只是默认堆栈的一部分。

在 Blue-2 中，您为 定义z-index: 0了#blue，因此它与 是同一堆叠上下文的一部分#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)。

Key Point
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

于 2013-04-29T19:04:18.167 回答