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

Question

如果我们将 z-index 与 position: absolute; 结合使用，则可以将元素的 ::before 置于其自身之下。 another question (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 */
}

呈现：

因此堆叠 context/order 由 z-index 定义。但是，当我将 z-index: 1; 应用于元素并将 z-index: -1; 应用于其 ::before 时，我无法实现相同的目的。

仅当我从元素中省略 z-index 时。

知道这是为什么吗？元素是否在其 ::before 和 ::after 伪元素之后呈现，以便它们获得相同的 z-index?

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

Answer 1

你的 div 和它的 ::after 伪元素是同一个堆栈上下文的成员，在本例中是根堆栈上下文。您为伪元素提供的新堆叠上下文将用作对其子元素（不存在）的引用，但 z-index 值适用于当前堆叠上下文。 CSS spec 为每个堆叠上下文规定了以下绘制顺序：

Within each stacking context, the following layers are painted in back-to-front order:

the background and borders of the element forming the stacking context.

the child stacking contexts with negative stack levels (most negative first).

the in-flow, non-inline-level, non-positioned descendants.

the non-positioned floats.

the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

the child stacking contexts with positive stack levels (least positive first).

看，具有负堆栈级别的子堆栈上下文，例如您的div::after在具有堆栈级别0[=的定位后代之前绘制21=]，例如 div 本身。这解释了您注意到的行为。

Answer 2

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

如果这只在子 ::after 伪元素上完成，父元素将不会建立新的堆叠内容，一切都会按预期工作。

但是在父元素上添加 z-index 将启动一个新堆栈（这也会包装子堆栈..）。
如果您查看 stack rendering specification 上的前两点，您会发现背景将在其他子堆栈之前呈现：

Within each stacking context, the following layers are painted in back-to-front order:

the background and borders of the element forming the stacking context.

the child stacking contexts with negative stack levels (most negative first).

... ...

here's an example，阐明嵌套堆叠背景的不同渲染行为。

position: relative 不可选;默认 position:static，z-index 无效。

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

z-index when using ::after under element

css

z-index

pseudo-element