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

CSS 堆疊順序：偽元素可以放置在父元素下方嗎？

使用 :after 偽元素設計元素樣式時，偽元素可能看起來總是位於父元素上方。這是因為偽元素本質上被視為其關聯元素的後代，並繼承相同的堆疊上下文。

解決方案：建立新的堆疊上下文

要定位如果偽元素位於其父元素之下，則需要建立一個新的堆疊上下文。這可以透過絕對定位偽元素並分配“auto”以外的 z-index 值來實現。

考慮以下CSS 與HTML 程式碼：

說明：

• #element div 被賦予一個相對位置，為絕對位置提供上下文定位。
• :after 偽元素由其內容和尺寸定義。
• 偽元素絕對定位並分配負 z 索引 (-1) 以確保它是放置在父元素下方。

使用這個新的堆疊上下文，:after 偽元素現在可以定位在 #element div 下方，而不管父元素的堆疊順序。

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