CSS中设置z-index:1的父元素为何会被子元素覆盖？

这个现象是CSS层叠上下文（Stacking Context）规则下的标准渲染表现，不存在渲染bug，核心逻辑如下：

前置核心规则 #

• 当元素同时满足「position值为非static（即absolute/relative/fixed/sticky）、z-index值不为auto」两个条件时，会创建一个独立的层叠上下文。
• 层叠上下文的渲染遵循两个不可突破的约束：
  • 只有同属一个层叠上下文的元素，才能直接通过z-index值比较层叠顺序；跨层叠上下文的元素，z-index值没有直接比较意义，最终层级由它们各自最近的祖先层叠上下文的层级决定。
  • 创建了层叠上下文的元素，自身的渲染层永远低于它内部所有后代元素的渲染层——父元素的z-index只用来决定它和外部同级元素的层级关系，永远不可能把内部的子元素压在自己的背景/边框之下。

对应测试代码的逐层分析 #

测试代码复现 #

CSS样式：

div {
  width: 200px;
  height: 200px;
}

.red {
  background-color: red;
  position: absolute;
}

.blue {
  background-color: blue;
  position: absolute;
  left: 1877px;
}

.yellow {
  background-color: yellow;
}

.white {
  background-color: white;
  position: absolute;
  left: 650px;
  z-index: 1;
}

HTML结构：

<div class="white">
  <div class="red"></div>
</div>
<div class="blue"></div>
<div class="yellow"></div>

渲染逻辑拆解 #

1. 首先看.white元素：它设置了position: absolute和z-index: 1，因此在页面根层叠上下文（由<html>元素默认创建）中生成了一个独立层叠上下文，在根上下文的同级元素中层级为1。
2. 再看内部的.red子元素：它只设置了position: absolute，没有显式声明z-index，因此z-index取默认值auto，不会创建新的独立层叠上下文，从属于父元素.white创建的层叠上下文内部。
3. 单个层叠上下文内部，元素从底到顶的绘制顺序是固定的：

• 层叠上下文自身的背景、边框
• z-index为负值的定位子元素
• 普通流中的块级元素
• 浮动元素
• 普通流中的行内/行内块元素
• z-index为auto的定位元素
• z-index为正值的定位子元素

4. 示例中的.red元素属于「z-index为auto的定位元素」，在绘制顺序上天然排在父元素.white的背景层之上，因此会直接覆盖父元素的白色背景，这和父元素设置的z-index: 1完全不冲突——这个z-index:1的作用是让.white整体（包括它内部所有子元素）和根上下文里的其他同级元素（比如.blue、.yellow）比较层级，不是用来压制内部子元素的。

快速验证方法 #

可以给.red设置z-index: -1做测试，会发现红色块不会跑到.white外面被其他外部元素覆盖，只会被.white自身的白色背景挡住——这就是层叠上下文边界的约束效果：子元素的z-index永远只在父元素的层叠上下文内部生效，逃不出父元素的层叠范围。

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