如何將偽元素放置在其父元素下方？

偽元素可以定位在其父元素下方嗎？

您正在嘗試使用 :after 偽元素來設定元素的樣式，但是 ::after元素似乎位於元素本身之上：

#element {
    position: relative;
    z-index: 1;
}

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

您可以更改堆疊順序來放置偽元素嗎

答案：堆疊上下文操作

偽元素其實是其父元素的子元素。建立新的堆疊上下文對於修改預設堆疊順序並將偽元素定位在其父元素下方是必要的。這是透過將絕對定位和非「auto」的z-index 值應用於偽元素來完成的：

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

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;

    /* create a new stacking context */
    position: absolute;
    z-index: -1;  /* to be below the parent element */
}

這會建立一個新的堆疊上下文，將偽元素放置在其父元素後面.

以上是如何將偽元素放置在其父元素下方？的詳細內容。更多資訊請關注PHP中文網其他相關文章！