Css 元素的z索引对伪元素：before/：after的z索引的影响

关于z-index和css伪元素：：before/：：after，这里有一个我不太理解的行为

此JSFIDLE中对此进行了说明：

我创建了一个定位框，并在pseudo元素之后添加了：：的内容（同样定位）

• 如果我将z-index设置为：：after伪元素，那么一切都正常工作，我可以通过使用z-index将其放置在父元素的上方或下方

#no-z-index{
背景：浅蓝色；
宽度：100px；
高度：100px；
位置：相对位置；
}
#no-z-index:after{
内容：“z指数-1”；
宽度：50px；
高度：50px；
背景：黄色；
位置：绝对位置；
z-指数：-1；/*z-指数有问题*/
顶部：70像素；
左：70像素；
}

• 如果我也这样做，并设置父对象的z索引，它就不再起作用了

#z-索引{
背景：浅蓝色；
左：200px；
宽度：100px；
高度：100px；
位置：相对位置；
z索引：0；/*父z索引*/
}
#z-索引：之后{
内容：“z指数-1”；
宽度：50px；
高度：50px；
背景：黄色；
位置：绝对位置；
z-指数：-1；/*z-指数有问题*/
顶部：70像素；
左：70像素；
}

---

这是预期行为吗？

这是预期行为，记录在

如果未在生成元素上指定

z-index

（默认为

auto

），则生成元素和伪元素将显示在相同的堆叠上下文中。这允许伪元素在其

z-index

较低时显示在元素下方

当您在生成元素上指定

z-index

时，该元素会为伪元素（实际上是它的所有子元素）创建一个新的堆栈上下文，防止伪元素出现在它下面，即使您给它一个负的

z-index

，而且我刚刚记得很久以前。