flex子项z-index无效是因为其默认position: static不参与层叠计算；需显式设置relative/absolute等定位属性，且要排查祖先元素是否创建了层叠上下文（如opacity
Flex子项写了z-index却没反应，是因为没定位
z-index 对 position: static 元素完全不生效——而 Flex 子项默认就是 static。哪怕你给它加了 z-index: 9999，浏览器连解析都不会解析，开发者工具里 z-index 值甚至可能显示为 auto（带删除线）。这不是“效果差”，是压根没参与层叠计算。
常见错误现象：
- 在
.item { z-index: 10; }中只写这一行，元素仍被盖住 - Vue/React 动态切换 class，只加了含
z-index的类，漏掉定位声明 - 误以为
display: flex容器会让子项“天然支持层级”
实操建议：
- 打开 DevTools → «Computed» 面板 → 搜索
position，确认最终值不是static - 最小验证：临时手动勾选
position: relative，看遮挡是否立刻消失（几乎不影响布局） - 别依赖继承：父容器设了
position: relative，子项不会自动获得定位能力
Flex容器本身不创建层叠上下文，但它的祖先会
Flex 容器默认不触发新层叠上下文，但只要它的任意一个祖先（包括它自己）设置了 opacity、transform、filter 等属性，就会把所有子项“关进盒子”。此时子项的 z-index 只能在该容器内部比大小，根本无法和外部元素竞争。
典型触发条件（哪怕值看起来无害）：
-
opacity: 0.99（注意：opacity: 1不触发） -
transform: translateZ(0)、scale(1)、rotate(0) -
filter: blur(0.1px)、filter: opacity(1) -
will-change: transform、isolation: isolate
排查方法：
- 在 Chrome DevTools 中选中被遮元素 → «Layout» 标签页 → 查看
Stacking context是否为Yes - 逐级点击父节点，在 «Computed» 中搜上述属性，找到第一个非默认值
- 临时注释掉可疑样式，看问题是否消失
Flex子项自己加transform也会截断z-index作用域
给 Flex 子项加了 position: absolute 和 z-index 后，如果同时写了 transform（哪怕只是 transform: rotate(0)），它会立刻创建一个新的层叠上下文。结果是：该子项的 z-index 只对其内部后代有效，无法和同级兄弟或外部元素比高低。
错误写法示例：
.card-item {
position: absolute;
z-index: 10;
transform: scale(1); /* 这行让z-index失效 */
}
更稳妥的做法：
- 用
top/left替代transform做位移（尤其对定位元素） - 若必须用
transform，确保其父 Flex 容器未触发层叠上下文，且该子项没叠加其他触发属性（如opacity） - 调试时打开 Chrome «Layers» 面板，直接看渲染层结构，比单看 CSS 更直观
为什么调高z-index数值根本没用
子元素的 z-index 再大也没用——它出不去父级层叠上下文。真正要调的是那个“关住它”的父容器本身的 z-index 值，或者干脆绕开它。
修复思路：
- 如果父容器加
transform是为了过渡动画且可删，直接移除比狂堆数字干净十倍 - 如果必须保留（如淡入/模糊），就给该父容器加
position: relative+ 合理z-index（比如z-index: 1050） - 对模态框、Tooltip 类组件，更彻底的解法是用
createPortal（React）或Teleport（Vue）把元素挂到下，绕开所有祖先上下文
最隐蔽的问题往往藏在“看似无害”的样式里：一个 opacity: 0.999、一行 will-change: transform、甚至只是 filter: blur(0.1px)，都可能无声截断层级链。别只盯着目标元素改，得顺着 DOM 往上翻两三级，才能真正破局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
