当父元素有 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中文网其他相关文章！