CSS中z-index看似简单，实际却坑点重重。不少开发者遇到过这样的场景：给悬浮图片设置了z-index: 9999，图片却依然被旁边的轮播图、导航栏或者某个带阴影的容器盖住。原因在于z-index并不是全局唯一的层级，它只在同一个堆叠上下文内才有比较意义。理解堆叠上下文的形成条件和层叠顺序，是解决一切遮挡问题的关键。
一、z-index为什么有时不生效
首先要明确一个前提：z-index只对定位元素（position不为static）以及flex、grid容器的直接子元素生效。如果给一个普通流中的元素设置z-index，浏览器会直接忽略这个值，元素依然按照文档流的先后顺序参与渲染。
其次，z-index的比较范围是受限的。两个元素如果分别处于不同的堆叠上下文中，那么它们之间的层级关系由其所在的堆叠上下文本身决定，而不是各自的z-index数值。举个例子，元素A的z-index是10，但它所在的父容器z-index是1；元素B的z-index是5，父容器z-index是2。无论A的z-index设置多大，整体都会被B盖住，因为外层比较中1小于2。这就是典型的“局部冠军打不过全局选手”的情况。
看一个常见的错误写法：
.float-img {
z-index: 9999; /* 无效：元素是static定位 */
}
/* 正确的做法 */
.float-img {
position: relative;
z-index: 9999;
}二、哪些情况会创建堆叠上下文
堆叠上下文（Stacking Context）是一个三维概念，决定了元素在Z轴上的渲染层级。以下几种常见情况会创建新的堆叠上下文，理解它们是排查遮挡问题的基础。
第一类是文档根元素html，整个页面就是一个最大的堆叠上下文。第二类是z-index不为auto的定位元素，比如position: absolute配合z-index: 2。第三类是opacity小于1的元素，很多开发者不知道这一点，设置了半透明效果后元素层级突然变化，往往就是这个原因。
- position为fixed或sticky的元素（即使z-index为auto）
- transform、filter、perspective、will-change不为none的元素
- isolation为isolate的元素
- flex或grid容器的子元素且z-index不为auto
- contain为layout、paint或复合值时
特别注意transform这一条：给父容器加了动画或者transform: translateZ(0)做硬件加速提示，就会悄然创建堆叠上下文，导致内部悬浮元素被外部元素遮挡。这类问题隐蔽性强，排查时可以逐个注释掉父级的这些属性来验证。
三、层叠顺序的七个层级
在同一个堆叠上下文内部，元素的渲染遵循固定的层叠顺序，从低到高依次是：
- 背景和边框：形成堆叠上下文的元素自身的背景
- 负z-index的子堆叠上下文
- 常规流的块级盒子
- 浮动盒子
- 行内盒子
- z-index为auto或0的定位元素
- 正z-index的定位元素
这个顺序解释了很多“诡异”现象。例如悬浮图片如果只是float元素，它一定排在定位元素之下，哪怕定位元素的z-index是1。再比如给图片父级设置了负z-index，图片会跑到页面背景后面直接“消失”，这也是新手常踩的坑。排查时可借助Chrome开发者工具的Layers面板，直观查看元素的分层情况。
四、悬浮图片被遮挡的实战解决方案
方案一：检查并调整DOM结构。最直接的办法是把悬浮图片移到与遮挡元素相同的堆叠上下文中，通常是把图片元素提升到body的直接子级，或者从设置了transform、overflow的容器中挪出来。许多UI组件库会在容器上加overflow: hidden或动画transform，图片放在里面层级再高也出不来。
方案二：统一外层容器的z-index。如果无法调整DOM，可以给图片所在的父容器设置比遮挡元素更高的z-index，让外层容器在全局比较中胜出。注意父容器此时必须配合position定位才能让z-index生效。
.parent {
position: relative;
z-index: 100; /* 提升整个容器层级 */
}
.obstacle {
position: relative;
z-index: 50;
}方案三：使用isolation主动隔离。当页面层级复杂、z-index数值不断膨胀时，可以给独立模块设置isolation: isolate，让模块内部层级与外部解耦。模块内部的z-index随便怎么写，都不会影响外部结构，这是管理大型项目层级最优雅的方式。
.module {
isolation: isolate; /* 创建独立堆叠上下文 */
}
.module .float-img {
position: absolute;
z-index: 1; /* 只在模块内比较，无需写成9999 */
}五、日常开发的层级管理建议
层级失控的根源通常是z-index数值滥用，今天写99，明天同事写999，后天就要9999。建议团队建立层级规范，例如按功能划分区间：普通内容0-10，下拉菜单50-100，弹窗200-300，消息提示400-500，并在代码中定义CSS变量统一维护。
同时养成习惯：遇到遮挡问题先别急着改z-index数值，按三步排查——先确认元素是否有定位属性，再检查父级链上是否存在transform、opacity、filter等创建堆叠上下文的属性，最后确认比较的双方是否在同一上下文中。掌握这套思路后，绝大多数层叠问题都能快速定位，悬浮图片被遮挡自然迎刃而解。