css - 为什么z-index : -1; appear above 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 的后代的背景之上.这是有意为之的，在 this answer 中有更详细的介绍，并提供了规范的相关链接。}