<img>与负margin元素堆叠顺序异常及flex正常的原因咨询

问题场景 #

尝试将一个<div>放在带有负margin的<img>下方，但最终<img>覆盖了<div>。图片未设置定位，也没有创建堆叠上下文，按HTML自然渲染顺序似乎不该出现这种情况；但使用display: flex时显示完全正常，对此感到困惑，需要解释该现象及相关规范依据。

复现代码 #

CSS代码 #

.img {
  display: block;
}

.square {
  height: 100px;
  margin-top: -30px;
  background-color: green;
}

#flex {
  display: flex;
  flex-direction: column;
}

#container {
  display: flex;
  gap: 20px;
}

#container > * {
  width: 100px;
}

HTML代码 #

<div id="container">
  <div>
    <img class="img" src="https://placehold.co/100">
    <div class="square"></div>
  </div>

  <div id="flex">
    <img class="img" src="https://placehold.co/100">
    <div class="square"></div>
  </div>
</div>

原因解析 #

常规文档流的堆叠规则 #

在常规文档流（非flex/grid这类特殊布局）中，当元素因负margin发生重叠时，堆叠顺序存在**"后来居上"的例外情况**：处于同一堆叠上下文、未定位的元素里，替换元素（比如img、input这类自带内容的元素）会堆叠在普通块级元素上方，哪怕块级元素在HTML里排在后面。

你给img设置了display: block，但它依然是替换元素。在常规流的重叠场景中，替换元素的堆叠优先级高于普通块级元素，所以即使.square在HTML结构中位于img之后，还是会被img覆盖。

Flex布局的差异 #

Flex容器会创建特殊的渲染上下文，容器内的子元素（flex item）堆叠规则更直观：严格遵循HTML中的出现顺序——后出现的flex item会堆叠在先出现的flex item上方，不受元素类型影响。所以在#flex容器里，.square作为后一个flex item，能正常显示在img上方。

规范依据 #

CSS视觉格式化模型规范明确了常规文档流中未定位元素的堆叠层级（从低到高）：

• 块级元素的背景与边框
• 浮动元素
• 普通块级子元素（非替换元素）
• 行内级元素及替换元素
• 定位元素

替换元素的层级高于普通块级元素，这就是常规流中img覆盖下方div的核心原因。

内容的提问来源于stack exchange，提问作者Kith