z-index无效首要原因是元素position为static，因其不参与层叠计算；必须设为relative/absolute/fixed/sticky才生效，且受父级层叠上下文制约。
z-index写了却没用，先看position是不是static
浏览器直接忽略z-index的最常见原因：元素position还是static。这不是bug，是规范行为——z-index只对relative、absolute、fixed、sticky生效。
常见错误现象：
- Vue/React里动态加class，但class里漏了
position声明 - CSS重置库（如Normalize.css）把
img或button设回static，覆盖了你后续的z-index - Flex/Grid容器子项没显式设
position，误以为z-index自动生效
实操建议：
- 在DevTools的«Computed»面板搜
position，确认不是static - 临时加
position: relative验证——它不改变布局，但能立刻激活z-index - 对JS动态插入的元素，确保
position和z-index一起设置，别只写后者
父元素悄悄建了“结界”，子元素z-index只能关在里面比大小
你给弹窗按钮写了z-index: 9999，结果还是被header盖住？大概率是它的某个祖先元素触发了层叠上下文（stacking context），把整个子树锁进一个独立层级空间。
立即学习“前端免费学习笔记（深入）”；
哪些属性会静默创建结界：
-
opacity小于1（哪怕opacity: 0.999） -
transform不为none（包括transform: translateZ(0)、scale(1)、rotate(0.0001deg)） -
filter不为none（哪怕filter: blur(0.1px)） -
will-change: transform或will-change: opacity isolation: isolate-
position: fixed或sticky且z-index非auto
实操建议：
- 在DevTools Elements面板逐级点击父节点，右侧面板«Layout»标签页里盯住«Stacking context»是否突然变成
Yes - 临时注释掉疑似父级的
transform或opacity，看遮挡是否立刻消失 - 特别注意组件库默认给wrapper加的
position: relative; z-index: 0——z-index: 0会显式创建新上下文，比auto更危险
z-index数值再大也破不了上下文边界，该调谁的z-index
子元素z-index: 9999无效，不是因为它不够高，而是它出不去父级的上下文边界。真正起作用的是父容器自身在全局层级中的位置。
修复路径分两种：
- 如果父容器的
transform或opacity只是为动画过渡，且可删，直接移除——比堆数字干净十倍 - 如果必须保留（比如淡入效果、毛玻璃背景），就把父容器自身设为高
z-index，例如z-index: 1050，而不是只给内部弹窗设9999 - 对
modal/tooltip类组件，用createPortal（React）或Teleport（Vue）挂到body下，完全脱离干扰上下文
注意：z-index: auto和z-index: 0效果不同——前者不创建新上下文，后者会。别以为加个0很安全。
Flex/Grid容器里z-index的行为差异
Flex或Grid容器的子项即使没设position，也能响应z-index，但这仅限于该容器内部。一旦父容器触发了层叠上下文，子项的z-index照样被锁死。
关键点：
- 子项设
z-index（非auto）本身就会触发新层叠上下文——这点常被忽略 - 同级Flex子项之间，
z-index有效；但若其中一个子项的父容器有opacity: 0.99，它整个分支就降级为低优先级 - 不要依赖HTML书写顺序控制层级：后写的元素默认层叠更高，但这会被
z-index覆盖——前提是它们在同一上下文里
真正难的不是改哪一行CSS，而是意识到z-index不是独立变量，它是嵌套在层叠上下文树里的相对值。每次想加个9999前，先往上点三下DevTools——那个突然标红的Stacking context: Yes才是你该修的地。
