## 使用 `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中文网其他相关文章！