如何将 CSS 伪元素放置在其父元素下方？

将伪元素定位在其父元素下方

在 CSS 中，伪元素通常相对于其父元素定位。然而，尝试使用 z-index 值将它们放置在其父级下方可能看起来无效。

为伪元素创建堆叠上下文

要克服此限制，伪-元素必须放置在新的堆叠上下文中。这是通过以下方式实现的：

• 将伪元素的位置属性设置为绝对或固定。
• 为伪元素的位置分配一个非自动值z-index.

示例：

考虑以下代码：

#element {
    position: relative;
    z-index: 1;
}
#element::after {
    content: " ";
    position: absolute;
    z-index: 0;
    width: 100px;
    height: 100px;
}

最初，#element::after 伪-element 位于其父元素上方。要更改此顺序：

#element {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: blue;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;
    
    /* Positioning and creating a stacking context */
    position: absolute;
    z-index: -1;
}

通过将position:absolute和z-index:-1添加到伪元素，创建一个新的堆叠上下文。这会将伪元素移动到其父元素下方，同时保持其在上下文中的相对位置。

以上是如何将 CSS 伪元素放置在其父元素下方？的详细内容。更多信息请关注PHP中文网其他相关文章！