以前，我认为子元素不能对其父元素的兄弟元素进行z索引，该元素的z-index比其父元素高。例如，div和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'，因为它是从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的兄弟。
答案 0 :(得分：4)
在您的示例中，您有两种情况，称为蓝色和蓝色-2。
在蓝色中，您有两个堆叠上下文，第一个包含#blue，第二个包含#red和#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）。
关键点
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