為什麼 CSS 內容重疊但背景不重疊？

內容重疊，但背景不重疊

在 CSS 中，元素的繪製順序遵循特定的層次結構。當一個元素與另一個元素重疊時，重疊元素的內容將呈現在頂部。但是，重疊元素的背景不受影響。相反，它保持在其初始位置。

要了解此行為，請務必參考 [W3C 繪製順序文件](https://www.w3.org/TR/css-backgrounds-3 /#繪畫順序）。它概述了以下順序：

1. 父元素的背景顏色
2. 父元素的背景圖片
3. 子元素的內容（不包括背景和邊框）
4. 子元素的背景顏色
5. 子元素的背景圖片元素
6. 子元素的邊框

在您提供的程式碼中，「 .box」元素的背景在第4點繪製。 「.bottom」元素的背景也在第 4 點中繪製。但是，直到下一個巢狀元素（這是此元素中的根元素）的第 3 點才繪製「.bottom」元素（文字）的內容。

因此，「.bottom」元素的內容看起來位於「.box」元素的背景前面，因為文字是在「.box」元素的背景之後繪製的但在「.bottom」元素的背景之前。

要修改此行為，您可以對「.bottom」元素套用低不透明度，這會將其內容按堆疊順序放置在背景之前和「.box」元素的邊框。

以上是為什麼 CSS 內容重疊但背景不重疊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！