在元素下使用:: 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 */
}

呈现：

因此堆叠上下文/顺序由z-index定义。但是，当我将z-index: 1;应用于元素并将z-index: -1;应用于其::before时，我无法实现同样的目标。

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

为什么会这样？元素是在::before＆amp;之后呈现的吗？ ::after伪，所以他们得到相同的z-index？

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

Answer 1

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

  

在每个堆叠上下文中，绘制了以下图层   从前到后的订单：

     

  
1. 构成堆叠背景的元素的背景和边框。
  
2. 子堆叠上下文具有负堆栈级别（最多为负数）。
  
3. 流入的，非内联级别，未定位的后代。
  
4. 未定位的花车。
  
5. in-flow，内联级别，非定位后代，包括内联表和内联块。
  
6. 堆叠级别为0的子堆叠上下文和堆栈级别为0的已定位后代。
  
7. 具有正堆栈级别的子堆叠上下文（最少积极的第一个）。
  

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

Answer 2

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

如果只对孩子::after伪元素进行此操作，则父母不会建立新的堆叠内容，一切都会按预期工作。

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

  

在每个堆叠上下文中，以下按顺序绘制以下图层：

     

  
1. 背景以及构成堆叠背景的元素的边框。
  
2. 子堆叠上下文，堆栈级别为负（最多为负数）。
  
3. ......
  

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

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