CSS Z-index失效问题排查与解决指南

当z-index似乎不起作用时，通常是由于对CSS层叠上下文(stacking context)理解不够深入导致的。以下是系统性的排查和解决方法：

常见原因及解决方案

1. 元素未设置定位(position)

问题：z-index只对定位元素(position值不为static的元素)有效

/* 无效 */
.element {
    z-index: 10;
    position: static; /* 默认值 */
}

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

2. 父元素创建了新的层叠上下文

问题：子元素的z-index只在父元素的层叠上下文中有效

.parent {
    position: relative;
    z-index: 1; /* 创建新的层叠上下文 */
}

.child {
    position: absolute;
    z-index: 9999; /* 只在parent的上下文中有效 */
}

3. 层叠顺序规则

CSS默认层叠顺序(从下到上)： 1. 根元素的背景和边框 2. 普通流中的非定位块级元素 3. 浮动元素 4. 普通流中的非定位行内元素 5. 定位元素(z-index:auto或0) 6. 定位元素(z-index>0)

4. 其他创建层叠上下文的属性

以下属性也会创建新的层叠上下文： - opacity < 1 - transform不为none - filter不为none - will-change指定了上述属性 - isolation: isolate - mix-blend-mode不为normal

系统排查步骤

1. 检查定位：确认元素设置了非static的position
2. 检查父元素：向上查找DOM树，看是否有父元素创建了层叠上下文
3. 检查特殊属性：查看是否有opacity、transform等属性意外创建了新上下文
4. 使用开发者工具：
   • Chrome DevTools的Layers面板
   • 元素检查器中的Computed样式
5. 简化测试：逐步移除样式，定位问题来源

实用解决方案

1. 提升父元素z-index

.parent {
    position: relative;
    z-index: 10; /* 高于同级元素 */
}

2. 避免不必要的层叠上下文

/* 避免 */
.unnecessary-context {
    opacity: 0.99;
    transform: translateZ(0);
}

/* 改为 */
.optimized {
    /* 无特殊属性 */
}

3. 使用isolation属性

.container {
    isolation: isolate; /* 显式创建独立层叠上下文 */
}

4. 全局z-index管理

:root {
    --z-modal: 1000;
    --z-dropdown: 500;
    --z-tooltip: 200;
}

.modal {
    z-index: var(--z-modal);
}

高级技巧

1. 负z-index：可以出现在父元素背景下方
2. auto与0的区别：z-index:auto不创建层叠上下文，0会创建
3. flex/grid项：z-index对它们也有效，即使position为static

通过理解这些原理和采用系统化的排查方法，您应该能够解决大多数z-index失效的问题。