我可以將 CSS 偽元素放置在其父元素下方嗎？

偽元素可以放置在其父項下方嗎？

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