在 CSS 布局中绝对定位会让元素脱离文档流元素之间很容易产生重叠。重叠之后就有一个现实问题谁盖住谁这时候就要请出z-index了。一、z-index 是什么z-index用来控制定位元素在 Z 轴垂直于屏幕的方向上的堆叠顺序——可以理解为层级。层级越高离用户越近就越优先显示。 类比就像一叠纸z-index大的那张在上面小的被压在下面。二、基本使用规则1️⃣ 必须配合定位才生效z-index只对position值非static的元素生效即relative / absolute / fixed / sticky。如果一个元素没定位写z-index不会有任何效果。2️⃣ 取值整数正数、负数都可以一般取1 ~ 999数字越大层级越高auto默认元素不会创建新的局部层叠上下文在当前上下文中的层叠等级为 0设为具体数值时元素会创建一个新的层叠上下文它的后代只在这个上下文内部比大小不会再和外面的元素跨级比较3️⃣ 层级相等的比较规则如果两个定位元素的z-index相同或都是默认的 0那么后写的盖先写的——这里的前后指的是 HTML 结构中的顺序排在后面的元素层级更高。4️⃣ 关于继承的误区很多教程会说 “z-index会继承父元素的值”这其实不准确。严格来说z-index本身不会继承但父元素如果设置了z-index数值就会创建一个新的层叠上下文子元素无论自己z-index多大都跳不出父容器的层叠上下文去和外面的元素比这是z-index失灵最常见的坑 .parent{position:relative;z-index:1;/* 创建了层叠上下文 */}.child{position:relative;z-index:9999;/* 再大也只在 .parent 内部比出不来 */}三、代码示例stylebody{margin:0;padding:0;position:relative;/* body 作为定位参考 */}.box1{width:200px;height:200px;background-color:red;position:absolute;top:50px;left:50px;z-index:5;/* 红色盒子层级最高 */}.box2{width:200px;height:200px;background-color:blue;position:absolute;top:100px;left:100px;/* 没写 z-index默认 0 */}.box3{width:200px;height:200px;background-color:yellow;z-index:100;/* ❌ 没定位z-index 无效 */}/styledivclassbox1/divdivclassbox2/divdivclassbox3/div显示结果.box3黄虽然z-index: 100但它没设position所以z-index完全不生效按普通文档流走不参战.box1红z-index 5.box2蓝z-index默认 0 →红色盖住蓝色最终视觉红在最上蓝在中间黄按文档流排这里黄没定位其实在蓝后面但不重叠四、进阶不止定位会创建层叠上下文除了z-index 定位以下情况也会创建层叠上下文导致z-index明明很大却不生效display: flex / grid的直接子元素设了z-indexopacity 1transform / filter / perspective不为noneisolation: isolate记住一句话z-index的比较永远只在同一个层叠上下文里才有意义。五、小结z-index控制定位元素的堆叠顺序数值大在上必须配合position非static使用否则无效层级相同 →HTML后面的盖前面的父元素设了z-index会创建新层叠上下文子元素出不去看到z-index“失灵”先检查是不是被祖先的层叠上下文锁住了读者互动如果你觉得文章有待改进请在评论区留言我会认真考虑每一条建议。如果觉得文章有帮助欢迎点赞鼓励。想与我共同进步欢迎关注我。 感谢各位读者的支持与关注期待与大家一起在前端开发的道路上共同进步
CSS z-index 详解：掌控元素层叠顺序的钥匙
发布时间：2026/7/29 2:13:16
在 CSS 布局中绝对定位会让元素脱离文档流元素之间很容易产生重叠。重叠之后就有一个现实问题谁盖住谁这时候就要请出z-index了。一、z-index 是什么z-index用来控制定位元素在 Z 轴垂直于屏幕的方向上的堆叠顺序——可以理解为层级。层级越高离用户越近就越优先显示。 类比就像一叠纸z-index大的那张在上面小的被压在下面。二、基本使用规则1️⃣ 必须配合定位才生效z-index只对position值非static的元素生效即relative / absolute / fixed / sticky。如果一个元素没定位写z-index不会有任何效果。2️⃣ 取值整数正数、负数都可以一般取1 ~ 999数字越大层级越高auto默认元素不会创建新的局部层叠上下文在当前上下文中的层叠等级为 0设为具体数值时元素会创建一个新的层叠上下文它的后代只在这个上下文内部比大小不会再和外面的元素跨级比较3️⃣ 层级相等的比较规则如果两个定位元素的z-index相同或都是默认的 0那么后写的盖先写的——这里的前后指的是 HTML 结构中的顺序排在后面的元素层级更高。4️⃣ 关于继承的误区很多教程会说 “z-index会继承父元素的值”这其实不准确。严格来说z-index本身不会继承但父元素如果设置了z-index数值就会创建一个新的层叠上下文子元素无论自己z-index多大都跳不出父容器的层叠上下文去和外面的元素比这是z-index失灵最常见的坑 .parent{position:relative;z-index:1;/* 创建了层叠上下文 */}.child{position:relative;z-index:9999;/* 再大也只在 .parent 内部比出不来 */}三、代码示例stylebody{margin:0;padding:0;position:relative;/* body 作为定位参考 */}.box1{width:200px;height:200px;background-color:red;position:absolute;top:50px;left:50px;z-index:5;/* 红色盒子层级最高 */}.box2{width:200px;height:200px;background-color:blue;position:absolute;top:100px;left:100px;/* 没写 z-index默认 0 */}.box3{width:200px;height:200px;background-color:yellow;z-index:100;/* ❌ 没定位z-index 无效 */}/styledivclassbox1/divdivclassbox2/divdivclassbox3/div显示结果.box3黄虽然z-index: 100但它没设position所以z-index完全不生效按普通文档流走不参战.box1红z-index 5.box2蓝z-index默认 0 →红色盖住蓝色最终视觉红在最上蓝在中间黄按文档流排这里黄没定位其实在蓝后面但不重叠四、进阶不止定位会创建层叠上下文除了z-index 定位以下情况也会创建层叠上下文导致z-index明明很大却不生效display: flex / grid的直接子元素设了z-indexopacity 1transform / filter / perspective不为noneisolation: isolate记住一句话z-index的比较永远只在同一个层叠上下文里才有意义。五、小结z-index控制定位元素的堆叠顺序数值大在上必须配合position非static使用否则无效层级相同 →HTML后面的盖前面的父元素设了z-index会创建新层叠上下文子元素出不去看到z-index“失灵”先检查是不是被祖先的层叠上下文锁住了读者互动如果你觉得文章有待改进请在评论区留言我会认真考虑每一条建议。如果觉得文章有帮助欢迎点赞鼓励。想与我共同进步欢迎关注我。 感谢各位读者的支持与关注期待与大家一起在前端开发的道路上共同进步
