html – z-index的子项：’auto’vs z-index：0,CSS中的“堆栈上下文”是什么？

以前,我认为子元素不能对其父元素的兄弟元素进行z索引,该元素具有比其父元素更高的z索引.例如,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′,因为它是从body继承的,div C位于div A上,即使div B的z-index实际上比它没有时更低工作.

根据CSS2规范,z-index’auto’定义为

当前堆叠上下文中生成的框的堆栈级别为0.除非它是根元素,否则该框不会建立新的堆叠上下文.

我无法理解“堆叠环境”.它似乎是定义的z-index为0的唯一区别,默认为’auto’,为0,但也没有堆叠上下文.进一步来说：

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

这是一个小提琴,显示z-index为0和z-index为auto之间的差异.绿色div是蓝色div的孩子,红色div是蓝色div的兄弟.

http://jsfiddle.net/c7Tvt/

解决方法

在您的示例中,您有两个方案,称为Blue和Blue-2.

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

在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

原文地址：https://www.jb51.cc/html/227460.html