為什麼 `position:relative` 似乎像 `z-index` 一樣影響堆疊順序？

為什麼你的程式碼表現出類似Z-Index 的行為

在你的標記中， .container 元素有position:relative，你注意到了看起來模仿了z-index 的效果。此行為源自於 CSS 繪製順序。

繪製順序和定位

CSS 規範規定了圖層在螢幕上繪製的順序。如果沒有position:relative，你的.container元素是「in-flow」的，並在繪製順序的第4步中繪製。

相反，當你加上position:relative時，.container變得「定位」並屬於繪畫順序的第 8 步。

樹序繪畫

在每幅畫中步驟，元素以「樹順序」繪製。在您的情況下， .container 和 .mask 元素都是定位元素。由於兩者都沒有明確的 z-index 值，因此樹順序決定哪個繪製在頂部。

重新排序元素

在初始標記中， .mask 元素顯示在層次結構中的 .container 之後。因此，當兩個元素都定位後，.mask 將最後繪製，覆蓋 .container。

但是，如果您重新排序元素，使 .container 位於 .mask 之後，則兩個元素都將在步驟 8 下繪製，仍然按樹順序排列。在這種情況下，.container 將最後繪製，從而消除您先前觀察到的「z-index 行為」。

以上是為什麼 `position:relative` 似乎像 `z-index` 一樣影響堆疊順序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！