為什麼重疊的 HTML 內容有時不會遮蔽底層背景？

導致內容重疊問題的原因是什麼？

當兩個元素在 HTML/CSS 中重疊時，內容並不總是被重疊元素的背景覆蓋。發生這種情況是因為 CSS 渲染模型中指定的特定繪製順序。

CSS 繪製順序

CSS 繪製順序決定了元素在網頁上視覺呈現的順序。它由一組規則定義，這些規則指定首先繪製哪些內容層。這是一個簡化的概述：

1. 根元素的背景：根元素（）的背景顏色覆蓋整個畫布。
2. 子元素的背景：如果子元素是塊元素（例如，
   )，其背景顏色和圖像繪製在根元素背景的頂部，覆蓋元素的整個寬度和高度。
3. 邊框：子元素的邊框元素被繪製在其背景之上。
4. 文字內容：最後，子元素的文字內容被繪製在

提供的範例中的問題

在給定的範例中，我們有兩個元素：

1. .box: A
分區>紅色背景。
2. .bottom：另一個
   ；使用綠色背景和負邊距，使其與 .box 重疊。

   根據繪製順序：

   1. 的白色背景首先繪製，覆蓋整個頁面。
   2. 接下來繪製.box的紅色背景，由於它是塊元素，所以它覆蓋了元素的整個寬度和高度。
   3. 然後繪製 .bottom 的綠色背景，但由於負邊距，它在 .box 的文字內容與其背景之間滑動。
   4. 兩個元素的文字內容是最後要繪製的。

   結論

   觀察到的行為是預先定義的 CSS 繪製順序的結果，該順序優先考慮文字內容渲染而不是重疊元素的背景圖像或顏色。