為什麼「clip-path」會改變元素堆疊順序？

為什麼 Clip-Path 會影響堆疊順序？

當應用於元素時，clip-path 的作用類似於具有值的 CSS 不透明度小於 1。根據CSS 規範，此類屬性建立了一個堆疊上下文，它影響了繪製順序

堆疊上下文形成

堆疊上下文是一個二維平面，其中包含按特定順序排列的子元素。一旦建立了堆疊上下文，其中的元素就會按照從前到後或從後到前的順序進行渲染。

使用剪輯路徑繪製順序

根據繪畫順序，所有定位或不透明度後代（不透明度小於1）自動建立新的堆疊上下文。這意味著它們形成自己的堆疊上下文，並與文件的其餘部分隔離。

在我們的範例中，具有剪輯路徑的元素在繪製過程的步驟 8 中建立一個堆疊上下文。但是，程式碼中的圖像未定位，因此被視為流內非定位元素。這意味著它是在繪製過程中的後續步驟 (4) 中繪製的。

位置：相對和堆疊順序

透過添加位置：相對於圖像，我們本質上是強迫它形成自己的堆疊上下文。這確保了在第 8 步繪製圖像以及帶有剪輯路徑的標題。現在，由於其樹順序，圖像將位於標題上方。

結論

clip-path 對後面元素堆疊順序的影響DOM 源自於它以原子方式建立堆疊上下文。此上下文中的元素在被視為流內非定位的其他元素之前繪製。

以上是為什麼「clip-path」會改變元素堆疊順序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！