在CSS布局中，当多个元素在页面上发生重叠时，我们可以通过z-index属性来控制元素的显示层级，数值越大的元素会显示在更靠上的位置。不过z-index并不是随意设置就能生效，它有一套明确的使用规则。
z-index的基本使用规则
z-index属性用于设置元素的层叠顺序，其取值可以是整数、负数或者auto，默认值为auto。需要注意的是，z-index只有在元素满足特定条件时才会生效。
z-index生效的前提条件
z-index要生效，元素必须满足以下两个条件之一：
- 元素的position属性取值为relative、absolute、fixed或者sticky，也就是非static的定位
- 元素是flex布局或者grid布局的子项，且父容器设置了display为flex或grid
如果元素没有满足上述条件，即使设置了z-index数值，也不会对层级产生影响。
基础使用示例
下面是一个简单的z-index使用示例，两个绝对定位的div发生重叠，通过z-index控制显示顺序：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>z-index基础示例</title>
<style>
.container {
width: 300px;
height: 300px;
position: relative;
}
.box1 {
width: 200px;
height: 200px;
background-color: #ffcccc;
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}
.box2 {
width: 200px;
height: 200px;
background-color: #ccffcc;
position: absolute;
top: 100px;
left: 100px;
z-index: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">z-index为1的元素</div>
<div class="box2">z-index为2的元素</div>
</div>
</body>
</html>
上述代码中，box2的z-index值更大，所以它会显示在box1的上方。
层叠上下文对z-index的影响
z-index的层级比较并不是全局的，而是在同一个层叠上下文中进行比较。如果元素创建了层叠上下文，那么它的子元素的z-index只会在该层叠上下文内部生效，不会和上下文外的元素比较。
常见的创建层叠上下文的方式
除了position非static且z-index不为auto的情况会创建层叠上下文之外，还有很多其他属性也会创建层叠上下文：
- opacity属性取值小于1的元素
- transform属性取值不为none的元素
- filter属性取值不为none的元素
- perspective属性取值不为none的元素
- isolation属性取值为isolate的元素
- will-change属性指定了任意上述会创建层叠上下文的属性
层叠上下文的层级比较示例
下面的示例展示了不同层叠上下文下z-index的比较规则：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层叠上下文示例</title>
<style>
.parent1 {
width: 250px;
height: 250px;
background-color: #f0f0f0;
position: relative;
z-index: 1;
}
.child1 {
width: 150px;
height: 150px;
background-color: #ff9999;
position: absolute;
top: 50px;
left: 50px;
z-index: 100;
}
.parent2 {
width: 250px;
height: 250px;
background-color: #e0e0e0;
position: relative;
z-index: 2;
margin-top: -100px;
margin-left: 100px;
}
.child2 {
width: 150px;
height: 150px;
background-color: #99ff99;
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}
</style>
</head>
<body>
<div class="parent1">
<div class="child1">子元素z-index 100</div>
</div>
<div class="parent2">
<div class="child2">子元素z-index 1</div>
</div>
</body>
</html>
上述代码中，parent1的z-index是1，parent2的z-index是2，所以parent2整体显示在parent1上方，即使child1的z-index是100，也不会超过parent2的范围，因为child1属于parent1的层叠上下文，child2属于parent2的层叠上下文，两者的z-index不会跨上下文比较。
z-index使用的常见误区
很多开发者在使用z-index时会遇到一些不符合预期的情况，常见的误区有以下几种：
- 给没有设置定位的元素设置z-index，导致不生效
- 认为z-index数值越大就一定会显示在最上层，忽略了层叠上下文的限制
- 滥用z-index数值，比如直接设置很大的数值，导致后续调整层级时没有更大的数值可用
- 没有注意到父元素的层叠上下文影响了子元素的层级比较
z-index使用的最佳实践
为了避免z-index使用出现问题，建议遵循以下实践：
- 尽量只在必要的元素上设置z-index，不要随意给所有元素添加
- 设置z-index时使用有规律的数值，比如间隔10或者100，方便后续调整
- 先确认元素是否满足z-index生效的条件，再排查层级问题
- 遇到层级不符合预期时，先检查元素是否处于某个层叠上下文中，再比较同上下文内的z-index数值
通过掌握z-index的使用规则和层叠上下文的原理，就可以准确控制页面元素的层级，解决各类元素重叠显示的问题。
z-index层叠上下文positionopacitytransform修改时间：2026-07-09 08:54:31