为什么内容后面会出现重叠的元素背景？

内容未被重叠元素的背景覆盖

这种差异是由于 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 渲染顺序，我们可以预测和控制这些视觉效果。