关于css：元素的z-index对：before /：after伪元素的z-index的影响

Influence of the z-index of an element on the z-index of :before / :after pseudo element

这是关于z-index和CSS伪元素:: before / :: after的行为，我不太了解。

在此jsfiddle上进行了说明：http://jsfiddle.net/jgoyon/T6QCf/

我创建了一个定位框，并使用:: after伪元素(也定位了)添加了内容。

如果将z-index设置到:: after伪元素，则一切工作正常，我可以通过使用z-index来将其定位在父对象的上方或下方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#no-z-index {
background:lightblue;
width:100px;
height:100px;
position:relative;
}
#no-z-index:after {
content: 'z-index -1';
width:50px;
height:50px;
background:yellow;
position:absolute;
z-index:-1; /* z-index in question */
top:70px;
left:70px;
}

如果我做同样的事情并设置父级的z-index，它将不再起作用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#z-index {
background:lightblue;
left:200px;
width:100px;
height:100px;
position:relative;
z-index:0; /* parent z-index */
}
#z-index:after {
content: 'z-index -1';
width:50px;
height:50px;
background:yellow;
position:absolute;
z-index:-1; /* z-index in question */
top:70px;
left:70px;
}

这是预期的行为吗？

这是预期的行为，已在规范中记录。

如果未在生成元素上指定z-index(默认为auto)，则生成元素和伪元素将出现在同一堆叠上下文中。如果z-index较低，则允许伪元素出现在元素下方。

当您在generation元素上指定z-index时，该元素会为伪元素(及其所有后代)创建一个新的堆叠上下文，从而即使您将伪元素显示在其下方，给它一个负数z-index。