在元素下使用:: after时的z-index

Question

如果我们z-index结合使用position: absolute;它可能会将::before元素置于其自身之下.另一个问题有一个很好的例子(jsfiddle.net/Ldtfpvxy).

基本上

<div id="element"></div>

#element { 
    position: relative;
    width: 100px;
    height: 100px;
    background-color: blue;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;

    /* create a new stacking context */
    position: absolute;
    z-index: -1;  /* to be below the parent element */
}

呈现:

因此堆叠上下文/顺序由定义z-index.但是,当我申请z-index: 1;到的元素,z-index: -1;它的::before我不能达到同样的事情.

只有我省略z-index了元素.

任何想法为什么会这样？该元素是否在其::before&::afterpseudos 之后呈现,以便它们变得相同z-index？

工作: https ://jsfiddle.net/Ldtfpvxy/
不工作: https ://jsfiddle.net/Ldtfpvxy/1/(仅添加z-index: 1;到元素)

Answer 1

您的div及其伪子项是同一堆栈上下文的成员,在本例中是根堆叠上下文.您为伪元素提供的新堆叠上下文将用作对其子元素(不存在)的引用,但该z-index值适用于当前堆叠上下文.和CSS规范规定每个堆叠内容如下漆顺序:

在每个堆叠上下文中,以下层按从前到后的顺序绘制:

1. 形成堆叠背景的元素的背景和边界.
2. 子堆叠上下文与负堆栈级别(最负面的).
3. 流入的,非内联级别,非定位后代.
4. 未定位的花车.
5. 流入的,内联级的,未定位的后代,包括内联表和内联块.
6. 堆栈级别为0的子堆栈上下文和堆栈级别为0的已定位后代.
7. 堆叠具有正堆栈级别的子堆栈(最少积极的第一个).

看,子堆栈上下文具有负的堆栈级别,例如您的堆栈级别为0的已定位后代div::after之前,例如它自己.这解释了您注意到的行为.div

Answer 2

指定z-index您正在创建新的堆叠内容;

如果仅在子::after伪元素上执行此操作,则父级将不会建立新的堆叠内容,并且一切都将按预期工作.

但添加z-index父元素将启动一个新的堆栈(它也将包装子堆栈..).
如果你看一下堆栈渲染规范的前两个点,你会看到背景将在其他子堆栈之前呈现:

在每个堆叠上下文中,以下层按从前到后的顺序绘制:

1. 形成堆叠背景的元素的背景和边界.
2. 该子堆叠上下文有负的堆水平(最负第一).
3. ......

这是一个例子,阐明嵌套堆叠背景的不同渲染行为.

BTW

position: relative不是可选的,默认position:static z-index无效.