同一元素文本与背景间出现其他元素的CSS堆叠问题解析

现象描述 #

红色的.search元素从.header__top容器溢出后，最终渲染时居然卡在了.header__bottom的绿色背景和它的"Hello!"文本中间——这和常规的堆叠直觉不符，但完全符合CSS的堆叠规则。

代码复现 #

CSS代码 #

.search {
  width: 2rem;
  height: 10rem;
  background: red;
  margin-left: 2rem;
}
.header__top {
  display: flex;
  height: 2rem;
  background: blue;
}
.header__bottom {
  font-size: 2rem;
  background: green;
}

HTML代码 #

<div class="header__top"><div class="search"></div></div>
<div class="header__bottom">Hello!</div>

核心原理拆解 #

要搞懂这个现象，得结合无z-index时的默认堆叠顺序和块级元素的内部堆叠层次两个关键点：

1. 根堆叠上下文的全局顺序
   这里所有元素都没触发堆叠上下文的创建条件（比如position非static、z-index值、opacity<1、transform等），所以整个页面共享根堆叠上下文。在根上下文里，堆叠顺序基本遵循「HTML中后出现的元素，整体堆叠在先出现元素之上」——但这只是宏观规则，块级元素内部的层次还要细分。

2. 块级元素的内部堆叠层级（从下到上）
   每个普通块级元素（比如.header__bottom）的内部渲染层次是固定的：

   • 最底层：元素自身的背景和边框
   • 中间层：元素的子元素（未创建堆叠上下文的）
   • 最上层：元素的文本内容

3. 溢出元素的堆叠归属
   .search是.header__top的子元素，由于.header__top没设overflow: hidden，它会溢出父容器。在根堆叠上下文里，各元素的堆叠顺序细化后是：

   • .header__top的蓝色背景（先出现的块级元素背景）
   • .search的红色背景（先出现的块级元素的子元素）
   • .header__bottom的绿色背景（后出现的块级元素背景）
   • .header__bottom的"Hello!"文本（后出现的块级元素的文本内容）

   这就直接导致.search夹在了.header__bottom的背景和文本之间。

关键结论 #

• 当元素都处于根堆叠上下文时，堆叠顺序是「HTML顺序+元素内部层次」的组合结果，不是简单的谁后出现谁完全在上面。
• 块级元素的文本内容在内部层次中优先级高于子元素（子元素未创建堆叠上下文时），所以会覆盖在溢出的子元素之上。

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