以前,我认为子元素不能对其父元素的兄弟元素进行z索引,该元素具有比其父元素更高的z索引.例如,div和B是兄弟姐妹.Div A具有10的z索引,并且div B具有为5的z索引Div B具有子元素:Div C,具有9999的z-index从我的理解,div C将不被上述定位div A,因为div C的父(div B)具有较低的z-index比div A.这是正确的,除非div Bz-index为'auto'.当div B有"自动"的z-index的,这将是"0",因为它是从身体继承,div C持仓过div A,即使DIV B的z-index的实际上是LOWER比它时,它不能正常工作了.
根据CSS2规范,z-index'auto'定义为
当前堆叠上下文中生成的框的堆栈级别为0.除非是根元素,否则框不会建立新的堆叠上下文.
我无法理解" 堆叠上下文".它似乎是定义的z-index为0,默认为'auto'为0但没有堆叠上下文之间的唯一区别.进一步来说:
为什么没有堆叠内容的元素的子元素索引与堆叠上下文中的元素不同？
这是一个小提琴,它显示了z-index为0和z-index为auto之间的区别.绿色div是蓝色div的孩子,红色div是蓝色div的兄弟.
在您的示例中，您有两个场景，将它们称为 Blue 和 Blue-2。
在 Blue 中，您有两个堆叠上下文，第一个包含#blue，第二个包含#redand #green。 #blue位于其自己的堆栈上下文中，因为z-index: auto，并且此上下文只是默认堆栈的一部分。
在 Blue-2 中，您已经定义了z-index: 0for #blue，因此它是与 相同的堆栈上下文的一部分#red。在 Blue-2 中，#blue首先绘制，因为它具有最低的 z 索引 0。然而，#green是 的子级#blue并被绘制#blue，父级和子级形成一个新的堆叠上下文（如果您愿意，可以是子堆叠上下文）。最后，#red绘制在蓝绿色堆栈上，因为红色 z 索引为 2，大于蓝色 z 索引 0。在这种情况下，绿色的 z 索引会影响其相对于蓝色和绿色的堆栈级别，中的任何其他子元素#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
| 归档时间： |
|
| 查看次数： |
3716 次 |
| 最近记录： |