flex子项的z-index仅在显式设置非static的position（如relative）且未被祖先层叠上下文隔离时生效；否则浏览器直接忽略，不参与层叠计算。
Flex子项的z-index什么时候能生效
Flex子项的z-index能生效，前提是它**显式设置了非-static的position**，且**未被祖先层叠上下文隔离**。它不是“不能用”，而是“默认不参与”——只要满足这两个条件，z-index在同级已定位子项之间完全可比、行为和普通块元素一致。
- 同属一个Flex容器的两个子项：
.a { position: relative; z-index: 2; }会盖住.b { position: relative; z-index: 1; } - HTML顺序仅作兜底：若两者
z-index都为auto（或未声明），后出现的子项自然在上层 -
z-index: 0和z-index: auto效果不同：前者强制创建新层叠上下文，后者不会（前提是已定位） - 注意
transform陷阱：哪怕只加transform: rotate(0)到某个子项，它也会立刻创建新上下文，导致自己的z-index只对内部后代有效，无法再和兄弟比高低
为什么有时候看着写了却没反应
最常见原因是position值最终计算为static——浏览器直接跳过z-index解析，不是“失效”，是“不读”。Vue/React中动态切换class时，漏掉position声明比漏掉z-index更致命。
- 打开Chrome DevTools → 选中元素 → «Computed» 面板搜
position，确认不是static - 临时在Styles面板手动勾选
position: relative，看遮挡是否立刻变化 - 检查是否被父级
transform、opacity: 0.99、filter: blur(0)等属性静默创建了层叠上下文 - Flex容器本身设
position: relative+z-index不是必须操作；反而可能意外锁死所有子项层级
怎么快速验证是不是层叠上下文搞的鬼
真正卡住你的往往不是子元素，而是某个没写z-index却标着Stacking context: Yes的父节点。DevTools不自动高亮源头，得你手动往上点。
- 在Elements面板逐级点击父节点，在右侧面板«Layout»标签下盯紧
Stacking context字段 - 重点排查那些带
transform、opacity、filter、will-change的祖先，哪怕值看起来“无害”（如transform: translateZ(0)） - 临时注释掉可疑样式，观察遮挡是否消失——这是最快确认手段
- 如果必须保留动效，优先给那个“结界父容器”设
z-index（比如z-index: 1050），而不是狂堆子元素的数字
该不该把元素移出Flex容器
当目标是弹窗、Tooltip、下拉菜单这类需要全局层级穿透的组件时，硬调z-index不如绕开问题本身。Portal/Teleport不是“高级技巧”，而是解决层叠上下文隔离的标准路径。
- React中用
createPortal挂到document.body下，配合position: fixed手动定位 - Vue中用
<teleport to="body"></teleport>，避免受任意祖先transform或opacity影响 - 纯CSS方案下，可JS动态
appendChild到body，但需同步处理top/left计算和滚动/resize响应 - 别低估多层嵌套上下文：页面里可能同时存在3个独立上下文，而
Stacking context: Yes只告诉你“当前有”，不告诉你“上面还有几个”
z-index: 9999前，先点三下父节点看Stacking context。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
