Z-Index 與偽元素：案例研究

在CSS 中，z-index 屬性指定元素的堆疊順序頁面，確定哪些元素出現在其他元素“前面”或“後面”。然而，當涉及偽元素時，例如 ::before 或 ::after，它們與 z-index 的交互有時可能不那麼簡單。

考慮一個場景，我們使用::before 偽元素，如問題陳述所述。我們打算將偽元素保留在 header 元素後面，但是當我們將 z-index 應用於 header 時，偽元素意外地來到了前台。

解釋在於偽元素的本質元素本身。正如 CSS 規範中所述，::before 和 ::after 偽元素「與其他框交互，就好像它們是插入到關聯元素中的真實元素一樣」。這意味著偽元素有效地嵌套在父元素中。

當我們將 z 索引應用於標頭元素時，它會建立一個新的堆疊上下文。堆疊上下文是一個 3D 空間，其中元素按照其 z 索引值的順序呈現。同一堆堆疊上下文中的元素不能互相重疊。

在這種情況下，偽元素位於與標頭元素相同的堆疊上下文中。由於它被視為嵌套元素，因此它不能浮動在標頭後面，因為這需要它轉義堆疊上下文。

要解決此問題，一種解決方案是在標頭之前創建一個單獨的元素，如建議的那樣在答案中。該元素將充當標頭和偽元素的容器，其 z 索引將正確地將標頭堆疊在前面。