为什么剪辑路径会影响元素堆叠顺序？

为什么堆叠顺序会随着clip-path而变化

当元素应用了clip-path时，它会创建一个新的堆叠上下文，类似于不透明度如何影响堆叠顺序小于 1 的值。这是在 CSS 规范中指定的，其中指出“计算出的值不是 none 会导致以相同的方式创建堆栈上下文CSS 不透明度对 1 以外的值起作用。”

堆叠顺序是在绘制过程中确定的。以下步骤按顺序发生：

1. 位置、不透明度小于 1 或除无之外的变换的元素创建新的堆叠上下文。
2. 使用 z-index: auto 定位后代或 z-index: 0 放置在父级堆叠上下文中。
3. 流内、非定位后代放置在父级中堆叠上下文。

在提供的示例中，具有剪辑路径的元素在步骤 1 中绘制并创建一个新的堆叠上下文。没有设置任何位置的图像元素将在步骤 3 中、在由 Clip-path 元素创建的堆叠上下文之后绘制。

这就是图像出现在标题下方的原因，即使它稍后出现在 DOM 代码中。

解决方案：

要解决此问题，您可以在图像元素。这将导致它相对于其正常位置定位，因此将被插入到步骤 1 中由 Clip-path 元素创建的堆叠上下文中。因此，图像将出现在 header 元素上方。

不透明度示例：

使用不透明度可以观察到相同的行为。如果 header 元素的不透明度小于 1，它还会创建一个新的堆叠上下文，并且图像将出现在其下方，但没有位置属性。

以上是为什么剪辑路径会影响元素堆叠顺序？的详细内容。更多信息请关注PHP中文网其他相关文章！