当我将 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中文网其他相关文章！