在CSS布局中，z-index用来控制元素在层叠方向上的显示优先级。实际写代码时，我们常会碰到三种情况：完全不写z-index、把z-index设为auto、把z-index设为0。虽然它们看起来差不多，但在层叠上下文和定位表现上有着明显区别。
无z-index的情况
当一个元素没有设置z-index属性时，它不会创建新的层叠上下文。如果该元素是静态定位（position: static），那么它完全按照文档流顺序层叠，后面的元素会盖住前面的元素。
z-index: auto的区别
把z-index设为auto，在大部分表现上和无z-index类似，元素不会新建层叠上下文。但它的语义是自动层叠级别，会参与父层叠上下文的排列，而不像0那样主动建立上下文。
z-index: 0的区别
z-index为0时，元素会创建一个层叠上下文。在这个上下文内部，它的层级是0，也就是上下文里的最低层。这意味着它内部的子元素无论z-index多高，都跳不出这个上下文去盖住外部元素。
简单对比
| 设置方式 | 是否创建层叠上下文 | 典型表现 |
|---|---|---|
| 无z-index | 否 | 按文档流自然层叠 |
| z-index: auto | 否 | 自动层叠，不建立新上下文 |
| z-index: 0 | 是 | 建立上下文，内部最低层 |
代码示例
下面用一段HTML和CSS展示无z-index、auto和0的不同：
<div class="box auto">auto盒子</div> <div class="box zero">zero盒子</div> <div class="box none">无z-index盒子</div>
.box {
position: relative;
width: 100px;
height: 100px;
}
.auto {
z-index: auto;
background: red;
top: 10px;
}
.zero {
z-index: 0;
background: blue;
top: -20px;
}
.none {
background: green;
top: -50px;
}
使用建议
- 如果只是普通文档流遮挡，不用写z-index。
- 想让元素参与层叠但不隔离子元素，用auto。
- 需要隔离内部层级、避免被外部覆盖，用0或更高值。
理解auto、0和无z-index的区别，能让你在写弹窗、下拉菜单和浮层时少踩很多坑。