當父元素有 Z 索引時，如何將偽元素放置在其父元素後面？

操作偽元素的Z 索引

在CSS 中，將z 索引應用於父元素可能會影響偽元素的堆疊行為-元素。本文探討了這個問題並提供了解決方案。

問題

當父元素被賦予 z 索引時，它所包含的偽元素將被限制在父級的堆疊上下文。偽元素不能再擴展到此上下文之外以出現在父元素後面。

了解堆疊上下文

創建新的堆疊上下文本質上是為元素創建一個單獨的層有問題的元素。此層內的元素與上下文外部的元素隔離。在這種情況下，通常存在於父級層內的偽元素現在被困在父級的新堆疊上下文中。

解決方案

要解決問題是，CSS 允許人們脫離堆疊上下文。這通常是透過在需要特定堆疊順序的父元素之前引入新元素來實現的。這個「包裝」元素形成了自己的堆疊上下文，允許偽元素保留在其後面，同時仍然影響後續元素的堆疊順序。

程式碼範例

考慮以下程式碼：

<code class="css"><div id="wrapper">
  <header>
    <span class="pseudo">Hide me!</span>
  </header>
</div>

#wrapper {
  position: relative;
  z-index: 30;
}

header {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: yellow;
}

.pseudo {
  position: absolute;
  top: 25px;
  left: 25px;
  height: 100px;
  width: 100px;
  background-color: red;
  z-index: -1;
}</code>

透過建立「包裝器」div 並將其位置設為相對位置並將z 索引設定為30，我們建立了一個新的堆疊上下文，偽元素可以存在於該上下文之外。偽元素現在可以按照預期出現在黃色“標題”元素後面。

以上是當父元素有 Z 索引時，如何將偽元素放置在其父元素後面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！