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

Question

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

我试图在标题上使用剪辑路径，然后从该标题顶部下方的元素内拉出图像。但是，一旦我clip-path在标题上定义了 a ，图像（它应该位于堆叠顺序的较高位置，因为它稍后出现在代码中）就会位于标题下方：

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>

我希望图像位于标题上方。经过更多尝试后，我发现如果我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>

但为什么？请问这里发生了什么，为什么剪辑路径似乎会影响页面后面元素的堆叠顺序？

Answer 1

从规格来看：

计算值非 none 会导致创建堆叠上下文，就像CSS 不透明度对 1 以外的值所做的那样。

然后考虑绘画顺序：

8. 所有定位、不透明度或变换后代，按树顺序分为以下类别：
   1. 所有使用“z-index: auto”或“z-index: 0”定位的后代，按树顺序排列。对于那些具有“z-index：auto”的元素，将元素视为创建了一个新的堆栈上下文，但任何定位的后代和实际创建新堆栈上下文的后代都应被视为父堆栈上下文的一部分，而不是这个新的堆栈上下文。对于那些具有 'z-index: 0' 的堆栈上下文，请以原子方式处理生成的堆栈上下文。
   2. 所有不透明度小于 1 的不透明度后代，按树顺序，创建一个自动生成的堆叠上下文。
   3. 除无变换外，所有具有变换的变换后代均按树顺序创建原子生成的堆叠上下文。

的元素clip-path是在步骤（8）中绘制的，如果没有设置位置，则图像将在之前绘制

4. 对于其所有按树顺序排列的流入、非定位、块级后代：如果该元素是块、列表项或其他块等效项...

如果添加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>

有关的：

为什么position:relative; z-index 似乎改变了？

为什么具有 z-index 值的元素不能覆盖其子元素？

许多其他属性的行为方式相同，并要求您的元素在步骤 (8) 中进行绘制：

• filter ^参考
• backdrop-filter ^参考
• perspective ^参考
• mix-blend-mode ^参考
• mask ^参考