以前也有人问过这个问题，但只有在CSS中明确定义了z-index的情况下。
我尝试在标题上使用clip-path，然后从这个标题下的元素中拉一个图像到该标题的顶部。然而，一旦我在标题上定义了clip-path，图像（它应该在代码后面出现的堆栈顺序中更高）就会在标题下面**：
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-它可以工作：
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会影响页面后面元素的堆叠顺序？
1条答案
按热度按时间bsxbgnwa1#
从规范中：
如果计算值不为none，则会创建一个堆栈上下文，就像CSS opacity为1以外的值创建堆栈上下文一样。
然后考虑绘画顺序：
1.按树顺序排列的所有定位、不透明度或变换子体，它们属于以下类别：
1.所有具有“z-index：auto”或“z-index：0”的定位后代，按树顺序排列。对于具有“z-index：auto”的那些，将该元素视为创建了新的堆栈上下文，但任何定位后代和实际创建新堆栈上下文的后代应被视为父堆栈上下文的一部分，而不是此新上下文。对于具有“z-index：auto”的那些：0'处理原子生成的堆栈上下文。
1.所有不透明度小于1的不透明度后代，按树顺序创建一个原子生成的堆栈上下文。
1.所有具有transform而不是none的transform子代，按树顺序创建一个原子生成的堆栈上下文。
具有
clip-path的元素在步骤（8）中被绘制，并且如果没有设置位置，则图像将在之前被绘制1.对于所有它的流内、非定位**、按树顺序的块级后代：如果元素是块、列表项或其他等效块.
如果你把
position:relative添加到图片中，它将被定位，并将落在步骤（8）中，树的顺序将决定把它放在clip-path元素之上下面是与
opacity相同的代码，其中您将具有相同的绘制顺序：个字符
相关：
Why does position:relative; appear to change the z-index?
Why can't an element with a z-index value cover its child?的
许多其他属性的行为方式相同，并迫使您的元素在步骤（8）中绘制：
filter参考backdrop-filter参考perspective参考mix-blend-mode参考mask参考