為什麼內容後面會出現重疊的元素背景？

內容未被重疊元素的背景覆蓋

這種差異是由於 CSS 組件的渲染順序不同而產生的。 HTML 元素以以下順序渲染：

1. 父元素的背景和邊框
2. 子元素的背景和邊框
3. 子元素的內容

在提供的範例中，第二個div 應用了負的margin-top，導致它與第一個div 重疊。但是，由於上述渲染順序，第二個 div 的背景繪製在第一個 div 的內容下方。

澄清一下，巢狀順序和單一元素佈局會影響視覺輸出。由於文本的感知重要性，內容被放置在背景之上。在更複雜的場景中可以觀察到這個優先順序：

body {
  background: pink;
}

div {
  background: red;
  border: 3px solid brown;
  margin-bottom: -20px;
}

此範例的渲染順序如下：

1. 的背景
2. 第一個
   的背景和邊框
3. 第一個內容
4. 第二個
   的背景和邊框
5. 第二個
   的內容

   但是，透過分配位置：相對於一個元素，我們可以修改這個行為。此操作建立一個新的堆疊上下文，允許我們使用 z-index 控制元素的位置。這種機制使得無論 HTML 結構如何，都可以按照所需的順序直觀地定位元素。

   要注意的是，這種現象並不是特別直觀。然而，透過了解 CSS 渲染順序，我們可以預測和控制這些視覺效果。