本文详解 HTML 普通流下 为何覆盖负 margin 的相邻 背景（而非内容），以及 Flex 布局如何通过改变绘制模型解决该问题，依据 CSS 2.2 和 Flexbox 规范阐明底层机制。

本文详解 html 普通流下 `` 为何覆盖负 margin 的相邻 `

` 背景（而非内容），以及 flex 布局如何通过改变绘制模型解决该问题，依据 css 2.2 和 flexbox 规范阐明底层机制。

在标准文档流中，即使 未设置 position 或 z-index，也并非“完全按 HTML 顺序从上到下简单叠加”。关键在于 CSS 绘制顺序（painting order） —— 它严格遵循规范定义的分层规则，而非直观的 DOM 顺序。

根据 CSS 2.2 规范 §9.9.1，块级元素的背景和边框属于 stacking context 的 background layer，而其内容（content）（包括子元素、文本、替换元素如 ）则绘制在更上层的 content layer。当一个

使用 margin-top: -30px 上移并部分重叠前一个 时：

• 作为替换元素，其自身属于前一个块容器的 content layer；
• 后续
  的 background（绿色区域）绘制在 background layer，自然位于前一元素 content layer 的下方；
• 但该
  的 文本内容（如示例中添加的 "text content"）仍属于其自身的 content layer，因此会显示在 之上。

  这就是为什么你看到绿色背景被遮挡，但文字却能穿透显示——不是 “层级更高”，而是二者绘制在不同层。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载

  <!-- 普通流：绿色背景被遮挡，文字可见 -->
  <div>
    @@##@@
    <div class="square">text content</div> <!-- 文字在 img 上，背景在下 -->
  </div>

  而启用 Flex 布局后（如 #flex { display: flex; flex-direction: column; }），行为发生根本变化。CSS Flexbox 规范明确指出：Flex 项（flex items）的绘制方式等同于 inline-block 元素。而根据 CSS 2.2，inline-block 元素被视为创建了独立的 stacking context —— 即每个 flex item 的背景、边框、内容均在其自身局部层叠上下文中绘制，彼此隔离，不再与兄弟元素的内容层交叉干扰。

  因此，在 flex 容器中：

  • 和 .square 成为两个独立的 flex item；
  • 它们各自拥有完整的绘制层级（background → border → content）；
  • .square 的背景不再落入父容器的 background layer，而是作为其自身 stacking context 的底层，自然显示在 下方（只要 DOM 顺序未显式用 z-index 调整）。

  #flex {
    display: flex;
    flex-direction: column;
  }
  /* 此时 .square 的 background 与 img 处于同一级 flex container 的绘制序列中，
     且因 DOM 顺序靠后，默认绘制在 img 之后（即上方） */

  ✅ 关键总结：

  • 普通流中，负 margin 导致的视觉重叠本质是 层间绘制顺序差异（background layer vs. content layer），非 z-index 控制；
  • Flex 布局通过将子元素转为 inline-block 类行为，强制每个 item 独立成 stacking context，消除跨元素层间干扰；
  • 若需在普通流中实现类似效果，可主动为 .square 创建 stacking context（如添加 position: relative + z-index: 1），但需注意这可能引发新布局影响；
  • 始终优先考虑语义化布局（Flex/Grid）替代负 margin hack，既符合规范，又提升可维护性与可访问性。