CSS z-index 失效的常见原因及解决方法

z-index 是 CSS 中控制元素堆叠顺序的重要属性，但有时会出现"失效"的情况。以下是常见原因及解决方案：

常见原因

1. 未设置定位属性

   • z-index 只对定位元素(position 值不是 static)有效

2. 父元素形成新的堆叠上下文

   • 父元素设置了 opacity < 1
   • 父元素设置了 transform、filter 等属性
   • 父元素设置了 z-index

3. DOM 结构问题

   • 两个比较的元素不在同一堆叠上下文中

4. z-index 值被覆盖

   • 其他元素设置了更高的 z-index 值

解决方法

1. 确保元素已定位

   .element {
    position: relative; /* 或 absolute/fixed/sticky */
    z-index: 10;
   }
   

2. 检查父元素的堆叠上下文

   • 移除不必要的 opacity、transform 等属性
   • 或者调整父元素的 z-index

3. 统一堆叠上下文

   • 将需要比较的元素移到同一父元素下
   • 或者提升父元素的 z-index

4. 使用更高的 z-index 值

   .top-element {
    z-index: 9999; /* 确保足够高 */
   }
   

5. 检查 CSS 特殊性

   • 确保你的 z-index 没有被其他更具体的 CSS 规则覆盖

调试技巧

1. 使用浏览器开发者工具检查元素：

   • 查看计算样式中的 z-index 值
   • 检查元素是否形成了堆叠上下文

2. 逐步简化问题：

   • 创建最小可重现示例
   • 移除不必要的 CSS 属性

3. 使用 will-change 属性谨慎创建新的堆叠上下文

记住，z-index 是相对于同一堆叠上下文中的兄弟元素而言的，跨堆叠上下文的比较需要先统一上下文。