css - 为什么 z-index: -1; 出现在 z-index: 1;?

Question

解释这种行为：

<div style="z-index: 1"></div>
<div></div>
<div></div>
<div></div>

div {
   position: relative;
   background: red;
   width: 100px;
   height: 100px;    
}

div:before {
    position: absolute;
    background: blue;
    width: 100px;
    height: 100px;  
    z-index: -1;
    content: "";
    left: -5px;
    top: -5px;
}

http://jsfiddle.net/2VexH/2/

唯一的区别是第一个 div 有 z-index: 1 集。

Answer 1

将定位元素设置为（初始值）z-index以外的任何auto值都会导致该元素为其后代框生成新的堆叠上下文。

这可以防止它的任何后代出现在它下面，包括div:before伪元素，即使它们z-index是负数。当然，任何带有负数的后代z-index将继续出现在z-index包含元素内具有零或正数的后代的下方，但包含元素将始终位于最后面。¹

其余div没有z-index集合的元素将使用初始值，因此不会为其伪元素生成堆叠上下文，从而允许伪元素出现在真实元素下方。绘制它们的堆叠上下文是body.

---

¹ _{请注意，堆叠上下文根的内容仍将出现在带有负数的后代的背景z-index之上。这是故意的，在这个答案中有更详细的介绍，并附有规范的相关链接。}