在 CSS 樣式中，像 ::after 或 ::before 之類的偽元素被視為其關聯元素的後代元素。通常，它們出現在其父元素上方。如果您希望將偽元素定位在其父元素下方，則需要建立一個新的堆疊上下文來變更預設的堆疊順序。
將偽元素定位為絕對元素並指派非預設 z -index value 建立所需的堆疊上下文。這會將偽元素放置在單獨的層中，並允許其與其他元素重疊，包括其父元素。
#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 */
}在此範例中，偽元素 ::after 是絕對定位的，並被賦予 z-指數值為-1。這會將其放置在父元素 #element 的後面，因為後者的預設 z 索引為 0。
以上是我可以將 CSS 偽元素放置在其父元素下方嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
