為什麼剪輯路徑會影響元素堆疊順序？

為什麼堆疊順序會隨著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中文網其他相關文章！