內容重疊,但背景不重疊
在 CSS 中,元素的繪製順序遵循特定的層次結構。當一個元素與另一個元素重疊時,重疊元素的內容將呈現在頂部。但是,重疊元素的背景不受影響。相反,它保持在其初始位置。
要了解此行為,請務必參考 [W3C 繪製順序文件](https://www.w3.org/TR/css-backgrounds-3 /#繪畫順序)。它概述了以下順序:
在您提供的程式碼中,「 .box」元素的背景在第4點繪製。 「.bottom」元素的背景也在第 4 點中繪製。但是,直到下一個巢狀元素(這是此元素中的根元素)的第 3 點才繪製「.bottom」元素(文字)的內容。
因此,「.bottom」元素的內容看起來位於「.box」元素的背景前面,因為文字是在「.box」元素的背景之後繪製的但在「.bottom」元素的背景之前。
要修改此行為,您可以對「.bottom」元素套用低不透明度,這會將其內容按堆疊順序放置在背景之前和「.box」元素的邊框。
以上是為什麼 CSS 內容重疊但背景不重疊?的詳細內容。更多資訊請關注PHP中文網其他相關文章!