为什么'clip-path”会改变元素堆叠顺序？

为什么 Clip-Path 会影响堆叠顺序？

当应用于元素时，clip-path 的作用类似于具有值的 CSS 不透明度小于 1。根据 CSS 规范，此类属性创建了一个堆叠上下文，它影响了绘制顺序

堆叠上下文形成

堆叠上下文是一个二维平面，其中包含按特定顺序排列的子元素。一旦建立了堆叠上下文，其中的元素就会按照从前到后或从后到前的顺序进行渲染。

使用剪辑路径绘制顺序

根据绘画顺序，所有定位或不透明度后代（不透明度小于1）自动创建新的堆叠上下文。这意味着它们形成自己的堆叠上下文，并与文档的其余部分隔离。

在我们的示例中，具有剪辑路径的元素在绘制过程的第 8 步创建一个堆叠上下文。但是，代码中的图像未定位，因此被视为流内非定位元素。这意味着它是在绘制过程中的后续步骤 (4) 中绘制的。

位置：相对和堆叠顺序

通过添加位置：相对于图像，我们本质上是强迫它形成自己的堆叠上下文。这确保了在第 8 步绘制图像以及带有剪辑路径的标题。现在，由于其树顺序，图像将位于标题上方。

结论

clip-path 对后面元素堆叠顺序的影响DOM 源于它以原子方式创建堆栈上下文。此上下文中的元素在被视为流内非定位的其他元素之前绘制。

以上是为什么'clip-path”会改变元素堆叠顺序？的详细内容。更多信息请关注PHP中文网其他相关文章！