flex子项z-index无效的首要原因是未显式设置position（默认static会忽略z-index）；其次，父容器或祖先触发层叠上下文（如opacity
Flex子项设了z-index却没效果？先检查position
Flex容器本身不创建层叠上下文，但它的子项默认是 position: static —— 这是 z-index 失效的最常见原因。即使父容器是 display: flex，子项仍需显式声明定位才能启用 z-index。
实操建议：
- 给目标子项加
position: relative（最安全，不脱离文档流） - 避免只写
z-index: 10而漏掉position，浏览器会直接忽略该z-index - 若子项已用
align-self或margin微调位置，position: relative通常不会破坏现有布局
Flex容器内多个子项的z-index比较规则
在同一个 Flex 容器中，子项的 z-index 是可比的——前提是它们都已定位。此时数值越大越靠前，与 HTML 顺序无关。
注意点：
- 若两个子项都设置了
position: relative和z-index，比如z-index: 2和z-index: 5，后者一定盖住前者 - 若其中一个没设
position，它按默认堆叠等级（stack level）排在所有已定位子项之下，哪怕它在 HTML 中后出现 -
z-index: auto（默认值）等价于不参与排序，此时它和未定位元素一样，遵循“后来者居上”的自然顺序
为什么父容器加了opacity或transform后z-index突然失效？
Flex 容器若意外触发了新层叠上下文（例如加了 opacity: 0.99、transform: scale(1) 或 will-change: transform），其内部所有子项的 z-index 就只能在该容器内比较，无法再和外部元素竞争层级。
典型现象：
- 一个弹窗组件（含 Flex 布局）被页面顶部导航栏盖住，即使弹窗子项
z-index: 999 - 检查 computed styles 会发现导航栏父容器有
z-index: 10且创建了 stacking context，而弹窗容器虽有z-index: 100，但因自身也触发了上下文（如用了filter: blur(0)），导致其内部子项全被“封印”在局部层级里 - 用 Chrome DevTools 的「Layers」面板勾选
Show stacking order，能直观看到上下文边界
替代方案：不依赖z-index也能控制Flex项目堆叠
当 z-index 因上下文嵌套变得不可靠时，更可控的做法是调整 DOM 顺序或利用 Flex 自身特性。
可行路径：
- 把需要置顶的子项（如 Tooltip、临时提示）用 JS 动态
appendChild到 Flex 容器末尾 —— Flex 默认按源顺序渲染，后插入的项天然更靠前 - 对关键覆盖场景，用
isolation: isolate显式创建上下文，比靠opacity副作用更可预测 - 纯视觉遮罩类需求（如 loading overlay），优先用伪元素
::before并设position: absolute+inset: 0，避免卷入子项层级竞争
transform 或 opacity 切断了层级通路——查堆叠上下文比调大 z-index 数值管用得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
