为什么 clip-path（和其他属性）会影响后面 DOM 中元素的堆叠顺序 (z-index)？

Question

之前已经有人问过这个问题，但只是在 CSS 中明确定义了 z-index 的地方。

我正在尝试在标题上使用 clip-path，但随后从该元素下方的元素中拉出该元素上方的图像 header。但是，一旦我在 header 上定义了 clip-path，图像（它应该在代码的后面出现时在堆叠顺序上更高）就会在 下方 header:

body {
  padding: 1em;
}

header {
  background: #a00;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5em), 0 100%);
}

h1 {
  margin: 0;
  padding: 2em;
  font: 300%;
  color: white;
  text-align: center;
}

section {
  background: #ccc;
  padding-top:5em;
  margin-top:-5em;
}

img {
  margin-top: -10em;
  
}

<header>
  <h1>Header Content</h1>
</header>

<section>
  <img src="https://via.placeholder.com/330/0000FF/808080"/>
</section>

我希望图像在 header 之上。玩了几次之后，我发现如果我在图像上设置 position:relative - 它有效：

body {
      padding: 1em;
    }

    header {
      background: #a00;
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5em), 0 100%);
    }

    h1 {
      margin: 0;
      padding: 2em;
      font: 300%;
      color: white;
      text-align: center;
    }

    section {
      background: #ccc;
      padding-top:5em;
      margin-top:-5em;
    }

    img {
      margin-top: -10em;
      position:relative;
    }

<header>
  <h1>Header Content</h1>
</header>

<section>
  <img src="https://via.placeholder.com/330/0000FF/808080"/>
</section>

但是为什么呢？请问这里发生了什么，为什么 clip-path 似乎会影响页面后面元素的堆叠顺序？

Answer 1

来自 the specifcation:

A computed value of other than none results in the creation of a stacking context the same way that CSS opacity does for values other than 1.

然后考虑the painting order:

All positioned, opacity or transform descendants, in tree order that fall into the following categories:

All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order. For those with 'z-index: auto', treat the element as if it created a new stacking context, but any positioned descendants and descendants which actually create a new stacking context should be considered part of the parent stacking context, not this new one. For those with 'z-index: 0' treat the stacking context generated atomically.

All opacity descendants with opacity less than 1, in tree order, create a stacking context generated atomically.

All transform descendants with transform other than none, in tree order, create a stacking context generated atomically.

clip-path的元素在第(8)步绘制，如果没有设置位置则先绘制

For all its in-flow, non-positioned, block-level descendants in tree order: If the element is a block, list-item, or other block equivalent ...

如果您将 position:relative 添加到图像中，它将被放置并落在步骤 (8) 之下，树顺序将决定它位于 clip-path 元素之上

这是与 opacity 相同的代码，其中您将拥有相同的绘画顺序：

body {
  padding: 1em;
}

header {
  background: #a00;
  opacity:0.8;
}

h1 {
  margin: 0;
  padding: 2em;
  font: 300%;
  color: white;
  text-align: center;
}

section {
  background: #ccc;
  padding-top:5em;
  margin-top:-5em;
}

img {
  margin-top: -10em;
  
}

<header>
  <h1>Header Content</h1>
</header>

<section>
  <img src="https://via.placeholder.com/330/0000FF/808080"/>
</section>

为什么 clip-path（和其他属性）会影响后面 DOM 中元素的堆叠顺序 (z-index)？

Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?

css

clip-path