根据CSS2规范,z-index’auto’定义为
当前堆叠上下文中生成的框的堆栈级别为0.除非它是根元素,否则该框不会建立新的堆叠上下文.
我无法理解“堆叠环境”.它似乎是定义的z-index为0的唯一区别,默认为’auto’,为0,但也没有堆叠上下文.进一步来说：
为什么没有堆叠内容的元素的子元素与堆叠上下文中的元素不同？
这是一个小提琴,显示z-index为0和z-index为auto之间的差异.绿色div是蓝色div的孩子,红色div是蓝色div的兄弟.
解决方法
在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
