當我將 z-index 應用於父元素時，為什麼我的 ::before 偽元素沒有出現在其父元素後面？

Z-index 和偽元素：深入探索

在本文中，我們將深入研究CSS 的迷人世界堆疊上下文以及它們如何與偽元素交互，特別是::before 偽元素。我們將探討在 ::before 中使用 z-index 時遇到的常見問題，並提供確保正確堆疊行為的全面解決方案。

問題

考慮以下CSS：

<code class="css">header { 
    background: yellow;
    position:relative;
    height: 100px;
    width: 100px;
    z-index:30;
}

header::before { 
    content:"Hide you behind!";
    background: red;
    position:absolute;
    height: 100px;
    width: 100px;
    top:25px;
    left:25px;
    z-index:-1;
}</code>

在此程式碼中，我們建立了一個帶有::before 偽元素的「 header”元素。所需的行為是黃色“header”元素位於前台，紅色 ::before 偽元素位於後台。但是，當我們將 z-index 30 應用於 'header' 元素時，::before 偽元素不再出現在父元素後面。

說明

為了理解這種行為，我們需要深入研究 CSS 堆疊上下文的概念。堆疊上下文定義了一組層，其中元素根據其 z-index 值堆疊在彼此的前面或後面。堆疊上下文的創建是由某些 CSS 屬性觸發的，包括 z-index。

在上面的範例中，當我們將 30 的 z-index 應用於「header」元素時，它會建立一個新的堆疊語境。這個新的堆疊上下文將「header」元素及其子元素（包括 ::before 偽元素）與文件流的其餘部分分開。

::before 偽元素被視為以下內容中的子元素： 'header' 元素的堆疊上下文。因此，它受到堆疊上下文邊界的限制，無法浮動到其外部以出現在 'header' 元素後面。

解

為了解決這個問題，我們不能簡單地增加 ::before 偽元素的 z-index。相反，我們需要為 ::before 偽元素建立一個新的堆疊上下文，以便它可以正確堆疊在 'header' 元素後面。

實現此目的的一種方法是包裝'header' 元素在另一個元素中，如下所示：

<code class="css"><div class="wrapper">
  <header>
    ...
  </header>
</div>

.wrapper { 
    position:relative;
    z-index:30;
}</code>

透過建立這個新元素並為其分配z 索引，我們實際上是在創建一個與'header' 元素的堆疊上下文分開的新堆疊上下文。這允許 ::before 偽元素在新的堆疊上下文中正確堆疊在「header」元素後面。

結論

了解 CSS 堆疊上下文和偽元素元素互動對於創建複雜的佈局和確保正確的元素定位至關重要。透過仔細管理堆疊上下文，我們可以控制元素的分層並實現所需的視覺效果。

以上是當我將 z-index 應用於父元素時，為什麼我的 ::before 偽元素沒有出現在其父元素後面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！