为什么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.这是故意的,在本答复中有更详细的介绍,并附有规范的相关链接.}