Flex子项z-index“自动生效”是假象，实为CSS规范强制触发隐式定位：仅对flex/grid直系子项、z-index为具体数值时生效，不提供锚点或偏移能力，且无法突破祖先层叠上下文限制。
它其实需要——只是你没注意到浏览器悄悄帮你补上了。
Flex子项的z-index“自动生效”是假象
当你给一个 display: flex 容器的直接子元素写 z-index: 10，它看似没加 position 也能盖住别的元素，是因为：CSS规范明确要求，z-index 在 flex item 上只要值不是 auto，就会**强制触发定位行为**，等效于隐式设置了 position: static 的“升级版”——但这个升级不改变布局流，只让 z-index 进入层叠计算。
这不是宽容，是特例。它只对 display: flex 或 display: grid 的**直系子项**生效，且仅限于 z-index 值为具体数字（非 auto）时。
常见误判场景：
- 你以为
.item { z-index: 5; }是纯视觉控制，其实它已脱离position: static的原始语义 - 在 Vue/React 中用
:class="{ 'z-5': active }"，若该 class 只含z-index，它仍会触发隐式定位 —— 但一旦父级有层叠上下文，这个“隐式”就救不了你 - DevTools 的 «Computed» 面板里看不到
position值变，不代表它没被激活；要查 «Styles» 面板里是否标了「used value」或看 «Layout» 下的 stacking context 是否因此生成
为什么不能依赖这个隐式行为？
因为隐式触发的定位能力极弱：它不提供定位锚点，也不支持 top/left 等偏移，更无法作为后代 position: absolute 的参考容器。一旦你需要：
- 让子项内部的 badge 绝对定位到右上角 → 必须显式加
position: relative - 用
transform微调位置 → 它会立刻创建新层叠上下文，把隐式 z-index “关进去” - 和外部非 flex 元素比层级（比如弹窗盖过导航栏）→ 隐式定位无法突破祖先的
opacity: 0.99或transform
此时，z-index: 5 写得再高也没用，浏览器只会说：“它在自己的小盒子里赢了，但盒子本身被压在下面。”
怎么验证你真正在用 z-index，而不是靠运气？
打开 Chrome DevTools，选中那个 flex 子项，做三件事：
- 在 «Computed» 面板搜
position：如果显示static，说明 z-index 没生效（哪怕写了）；如果显示relative或其他值，说明已被显式或隐式覆盖 - 在 «Layout» 面板看 «Stacking context»：若为
Yes，说明该元素自己成了上下文根 —— 它的z-index只管内部，不管兄弟 - 临时删掉它的
z-index，再手动在 «Styles» 面板勾选position: relative→ 如果遮挡关系立刻变化，证明之前是隐式生效；如果没变化，说明它早被父级上下文锁死了
真正难的不是写不写 position: relative，而是意识到：flex 子项的 z-index 不是“免配置”，它是 CSS 在特定结构下开的一扇窄门——门开着，不代表你能走多远；想走得稳，还得自己带定位钥匙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
