为何DOM中先定义的inline元素会渲染在后定义block元素上层？

最初观察到DOM中更早定义的span元素会渲染在后续出现的元素上层，经过多轮实验验证，核心可复现现象为：inline元素（含文本节点）默认渲染层级高于block元素，即便inline元素在DOM树中出现顺序更早，也会覆盖在与其重叠的block元素上方。

验证实验 #

• 实验设计：为目标元素设置较大padding值制造元素重叠场景，分别对比inline、block、inline-block三类元素的层叠表现
• 实验效果截图：

实验CSS代码 #

div {
  border: 10px solid transparent;
  height: 30px;
  width: 100px;
}

div + div {
  margin-top: -20px;
}

.r {
  border-color: orange;
}
.g {
  border-color: lime;
  margin-left: 10px;
}
.b {
  border-color: blueviolet;
  margin-left: 20px;
}

.red,
.green,
.blue {
  color: white;
  padding: 30px;
  margin-left: 20px;
  /* 取消注释即可开启定位，观察z-index生效表现 */
  /* position: relative; */
}

.red {
  /* 注意：z-index仅在元素设置非static的position值时生效 */
  z-index: 1;
  background: red;
}

.green {
  background: green;
}

.blue {
  /* 注意：z-index仅在元素设置非static的position值时生效 */
  z-index: -1;
  background: blue;
}

/* 第二组对照实验样式 */
div.red,
div.green,
div.blue {
  height: 0px;
  width: 0px;
  padding: 25px;
}

div.r div,
div.g div,
div.b div {
  margin-top: -20px;
}

.inlineBlock {
  display: inline-block;
}

.inline {
  display: inline;
}

hr {
  margin-top: 50px;
}

实验HTML代码 #

<main id="root">
   Span
   <div class="r"><span class="red">1</span></div>
   <div class="g"><span class="green">2</span></div>
   <div class="b"><span class="blue">3</span></div>
   <hr>
   Div (block)
   <div class="r">
      <div class="red">1</div>
   </div>
   <div class="g">
      <div class="green">2</div>
   </div>
   <div class="b">
      <div class="blue">3</div>
   </div>
   <hr>
   Div (inlineBlock)
   <div class="r">
      <div class="red inlineBlock">1</div>
   </div>
   <div class="g">
      <div class="green inlineBlock">2</div>
   </div>
   <div class="b">
      <div class="blue inlineBlock">3</div>
   </div>
</main>

简化测试代码 #

<!-- inline元素测试组 -->
<div>
  <span>1</span>
</div>
<div>
  <span>2</span>
</div>
<div>
  <span>3</span>
</div>

<hr/>

<!-- block元素测试组 -->
<div>
  <div>1</div>
</div>
<div>
  <div>2</div>
</div>
<div>
  <div>3</div>
</div>

核心原因：浏览器默认层叠顺序规则 #

该现象完全符合CSS规范定义的无z-index场景下的层叠优先级，同一层叠上下文内，元素从底层到上层的渲染顺序固定为：

1. 当前层叠上下文根元素的背景与边框
2. 设置了负z-index的定位子元素
3. 常规流中非定位的block块级元素
4. 浮动元素
5. 常规流中的inline/inline-block行内元素、文本节点
6. 设置了z-index为auto或0的定位元素
7. 设置了正z-index的定位元素

「DOM中更早出现的inline元素覆盖在后续block元素之上」的表现，本质是行内内容的渲染优先级天然高于普通块级元素，和DOM出现顺序无关：只要两个元素同属一个层叠上下文、都未设置非static定位触发z-index生效，行内元素始终会层叠在普通块级元素上方。
这套规则的设计初衷是保障文字类行内内容优先展示，避免被块级元素的背景遮挡，保证阅读体验。

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