如何將 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中文網其他相關文章！