z-index 层叠顺序属性
最后更新：2026-09-13
z-index z-index 层叠顺序属性
z-index 属性用于控制定位元素在 Z 轴（垂直于屏幕方向）上的层叠顺序，值越大的元素会覆盖在值较小的元素之上。它常与 position 属性配合使用，用于处理弹窗、下拉菜单、遮罩等需要分层显示的场景。
| 分类 | |
|---|---|
| 初始值 | auto |
| 继承 | 否 |
| 适用于 | positioned |
| 可动画 | integer |
| CSS 版本 | CSS2 |
| 状态 | 标准 |
📝 语法
z-index: auto | <integer>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
auto | 关键字 | 不创建新层叠上下文 |
<integer> | 类型 | 整数层叠顺序，值越大越靠前 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| z-index | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
注意： z-index 仅对 position 值为非 static 的元素生效，对普通流中的元素设置 z-index 无效。
重要： z-index 的比较仅在同一个层叠上下文（stacking context）内有效。不同层叠上下文之间的 z-index 无法直接比较，子元素的 z-index 再高也无法超过父级层叠上下文的边界。
❓ 常见问题
Qz-index 设置多大合适？
A业务上通常 1~10 足够覆盖大多数场景（弹窗 9999、遮罩 1000 等大型项目可用整百/整千分层管理）。避免滥用 999999 这类极大值：一旦多个组件都靠调大 z-index 竞争，数值会失控、难以维护。更推荐把 z-index 限定在较小区间并用变量或约定管理层次。
Q为什么 z-index 不生效？
A常见原因：1）元素未设置 position（z-index 只对定位元素和 flex/grid 子项生效）；2）父元素创建了层叠上下文（opacity<1、transform、filter 等），把子元素 z-index 限制在父级内部；3）两个元素不在同一层叠上下文或不同父容器，无法直接比较。按这三步排查即可。
Q什么是层叠上下文（stacking context）？
A层叠上下文是一块独立的层叠作用域，内部 z-index 排序只在作用域内有效。创建条件包括：position 定位 + z-index 非 auto、opacity 小于 1、transform/filter 等。子元素 z-index 再大也无法越过父级层叠上下文边界，弹窗盖不住遮罩往往是这个原因。
Qz-index 只在 position 定位元素上生效吗？
A传统上 z-index 只对定位元素（relative/absolute/fixed/sticky）生效；但 flex 和 grid 布局中，子项即使不定位也能用 z-index 控制顺序。普通文档流中未定位的元素之间无法用 z-index 分先后。要给普通元素分层，先加 position:relative。
🏷️ 相关属性
💡 相关案例
📚 相关教程
