在CSS布局中，z-index属性用来控制元素在Z轴方向的层叠顺序，数值越大的元素会显示在数值越小的元素上方。但实际开发中经常会出现设置了很高的z-index值，元素却没有按预期显示在最上层的情况，这就是z-index失效问题。了解其背后的生效规则，就能快速排查问题。
z-index生效的前提条件
z-index并不是对所有元素都生效，它需要满足以下基础条件：
- 元素必须设置了
position属性，且值不为static，也就是需要是relative、absolute、fixed或者sticky中的一种 - 元素没有被设置为
display:none，隐藏的元素不会参与层叠计算
z-index失效的常见原因及解决方案
1. 元素未设置非static的定位属性
这是最基础的失效原因，如果元素没有设置定位属性，或者定位属性是static，那么z-index设置后不会生效。
解决方案：给需要控制层叠顺序的元素设置合适的定位属性，比如需要相对定位就设置position:relative，需要绝对定位就设置position:absolute。
示例代码如下：
/* 错误写法：元素定位为static，z-index无效 */
.box1 {
z-index: 100;
}
/* 正确写法：设置非static定位 */
.box2 {
position: relative;
z-index: 100;
}
2. 父级元素创建了独立的层叠上下文
层叠上下文是HTML元素的三维概念，它会限制内部元素的z-index作用范围。如果父元素创建了层叠上下文，那么子元素的z-index只能在父元素的层叠上下文内部生效，无法和父元素外部的元素的z-index直接比较。
常见的会创建层叠上下文的属性包括：
- 设置了
position为非static且z-index不为auto的元素 - 设置了
opacity值小于1的元素 - 设置了
transform、filter、perspective等属性的元素 - 设置了
flex或grid容器的子元素且z-index不为auto
解决方案：如果需要子元素的z-index和外部元素比较，要么避免父元素创建层叠上下文，要么调整父元素的z-index值，让父元素本身的层叠顺序符合预期。
示例代码如下：
/* 父元素创建了层叠上下文，子元素的z-index无法超出父元素范围 */
.parent {
position: relative;
z-index: 1; /* 父元素创建层叠上下文 */
opacity: 0.9; /* 这个属性也会让父元素创建层叠上下文 */
}
.child {
position: relative;
z-index: 999; /* 只在.parent的层叠上下文内生效，无法和外部z-index为2的元素比较 */
}
/* 解决方案：调整父元素的z-index，或者去掉父元素的不必要属性 */
.parent-fix {
position: relative;
z-index: 1000; /* 提升父元素整体层叠顺序 */
}
3. 忽略了默认的层叠顺序规则
即使元素都满足z-index生效条件，还有默认的层叠顺序规则：如果元素的z-index相同，那么后渲染的元素会显示在先渲染的元素上方；如果元素没有设置z-index，或者z-index为auto，那么定位元素会显示在非定位元素上方。
解决方案：检查元素的渲染顺序，或者显式给需要上层的元素设置更高的z-index值，不要依赖默认的渲染顺序。
4. z-index数值溢出或写法错误
z-index的有效值范围是整数，虽然浏览器对超出范围的值处理比较宽松，但部分场景下可能出现异常。另外如果z-index写成了字符串或者其他类型，也会导致失效。
解决方案：确保z-index的值是整数，不要加单位，不要写成字符串形式。
示例代码如下：
/* 错误写法：带了单位或者字符串 */
.error1 {
position: relative;
z-index: 100px; /* 带单位无效 */
}
.error2 {
position: relative;
z-index: "100"; /* 字符串无效 */
}
/* 正确写法 */
.correct {
position: relative;
z-index: 100;
}
快速排查z-index失效的步骤
遇到z-index问题时，可以按照以下步骤快速排查：
- 检查目标元素是否设置了非static的position属性
- 检查目标元素的父级链上是否有元素创建了层叠上下文，可通过浏览器的开发者工具查看元素的层叠上下文信息
- 检查目标元素的z-index值是否为有效的整数，是否有写法错误
- 检查是否有其他元素的z-index值更高，或者后渲染覆盖了当前元素
掌握这些规则和排查方法后，大部分z-index失效问题都可以快速解决，减少布局调试的时间成本。