## 使用 `z-index` 時如何將 `::before` 偽元素定位在其父元素後面？

Before 偽元素的 Z 索引難題

在父元素中使用 before 偽元素時，必須解決其問題定位行為。預設情況下，偽元素位於其父元素內部。

但是，為父元素指派 z 索引會建立一個新的堆疊上下文，從而隔離其內容。因此，由於堆疊上下文邊界，before 偽元素即使 z 索引為負，也無法出現在父元素後面。

要解決此問題，請考慮以下解決方案：

1. 單獨的元素層次結構： 在標題元素之前添加另一個元素。這會創建一個自然的堆疊順序，其中新的父元素可以被賦予低於標題的 z-index，從而允許先前的偽元素出現在其後面。
2. Z-Index 嵌套： 雖然不太推薦，但您可以對偽元素使用負z 索引值，對父元素使用正值，以在同一堆疊上下文中創建所需的堆疊順序。但是，這種方法可能會導致更複雜的程式碼和潛在的跨瀏覽器相容性問題。

範例：

<code class="css"><div class="wrapper">
  <header>
    content...
    <span class="pseudo-element">Before content...</span>
  </header>
</div>

.wrapper {
  position: relative;
  z-index: 0;
}

header {
  position: relative;
  background: yellow;
  height: 100px;
  width: 100px;
  z-index: 1;
}

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

以上是## 使用 `z-index` 時如何將 `::before` 偽元素定位在其父元素後面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！