在css布局中，absolute定位元素会脱离文档流，多个absolute元素或者absolute元素和其他普通元素出现重叠时，就需要通过z-index属性来控制它们的显示层级，数值越大的元素会显示在越上层。
z-index的基本使用规则
z-index属性只能作用于定位元素，也就是position属性值为relative、absolute、fixed、sticky的元素，对于静态定位（position:static）的元素设置z-index是无效的。absolute元素本身属于定位元素，所以可以直接设置z-index。
z-index的取值可以是正整数、负整数或者0，默认值是auto，当z-index为auto时，元素的层叠层级由其在DOM树中的位置和父元素的层叠上下文决定。
基础代码示例
下面是两个absolute元素的基础示例，通过调整z-index控制显示顺序：
/* 父容器设置相对定位，作为absolute元素的定位参照 */
.container {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
/* 第一个absolute元素 */
.box1 {
position: absolute;
top: 20px;
left: 20px;
width: 150px;
height: 150px;
background-color: #ffcccc;
z-index: 1; /* 设置z-index为1 */
}
/* 第二个absolute元素 */
.box2 {
position: absolute;
top: 50px;
left: 50px;
width: 150px;
height: 150px;
background-color: #ccffcc;
z-index: 2; /* 设置z-index为2，会显示在box1上层 */
}
<div class="container">
<div class="box1">z-index为1的absolute元素</div>
<div class="box2">z-index为2的absolute元素</div>
</div>
z-index不生效的常见原因
很多开发者会遇到设置了z-index但absolute元素层级没有变化的情况，常见原因有以下几种：
- 父元素形成了新的层叠上下文，子元素的z-index只能在父元素的层叠上下文内生效，无法和父元素外部的元素的z-index直接比较。
- z-index取值相同的情况下，后渲染的DOM元素会显示在上层，和DOM的书写顺序有关。
- 给非定位元素设置了z-index，这种情况下z-index完全不生效。
层叠上下文对z-index的影响
层叠上下文是css中一个重要的概念，它决定了元素层叠的参考范围。当元素满足以下条件时会形成层叠上下文：
- 根元素（html标签）本身就是一个层叠上下文。
- position为absolute或relative，且z-index不为auto的元素。
- position为fixed或sticky的元素。
- flex容器的子元素，且z-index不为auto。
- opacity属性值小于1的元素。
- transform属性值不为none的元素。
当父元素形成层叠上下文后，其内部的所有absolute元素的z-index都只会在父元素的层叠上下文内生效，哪怕子元素的z-index数值再大，也无法突破父元素的层级范围。
层叠上下文影响示例
下面的代码可以展示层叠上下文的影响：
/* 父容器1，形成层叠上下文 */
.parent1 {
position: relative;
z-index: 1; /* z-index不为auto，形成层叠上下文 */
width: 200px;
height: 200px;
background-color: #f0f0f0;
}
/* 父容器1内的absolute元素，z-index设为100 */
.child1 {
position: absolute;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background-color: #ff9999;
z-index: 100;
}
/* 父容器2，层叠上下文，z-index比parent1高 */
.parent2 {
position: relative;
z-index: 2; /* z-index大于parent1的1 */
width: 200px;
height: 200px;
background-color: #f0f0f0;
margin-top: -150px;
margin-left: 100px;
}
/* 父容器2内的absolute元素，z-index设为1 */
.child2 {
position: absolute;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background-color: #99ff99;
z-index: 1;
}
<div class="parent1">
<div class="child1">z-index100</div>
</div>
<div class="parent2">
<div class="child2">z-index1</div>
</div>
上述代码中，child1的z-index是100，child2的z-index是1，但因为parent1的z-index是1，parent2的z-index是2，所以parent2整体在parent1上层，child2也会显示在child1上层，这就是层叠上下文的影响。
调整absolute元素z-index的注意事项
实际调整absolute元素z-index时，建议遵循以下原则：
- 尽量避免给父元素设置不必要的z-index，减少层叠上下文的嵌套，避免层级混乱。
- z-index的取值建议用正整数，按照10、20、30这样的间隔取值，方便后续插入新的层级。
- 如果absolute元素需要覆盖全页面其他所有元素，可以将其直接放在body标签下，并且设置足够大的z-index，同时避免body形成额外的层叠上下文。
注意：z-index为负值的absolute元素会显示在普通文档流元素的下层，除非普通文档流元素也形成了层叠上下文并且z-index更高。
cssz_indexabsolute定位层叠上下文修改时间：2026-07-01 22:24:44