Flex子项z-index无效是因为默认position:static，需显式设置position:relative等定位属性；若父容器或祖先触发堆叠上下文（如opacity
Flex子项写了z-index但没反应，是因为没定位
浏览器对z-index的处理非常严格：只要元素的position是static（默认值），它就完全不参与层叠计算——不是“效果弱”，而是直接忽略整行z-index。Flex容器本身不改变子项的定位状态，display: flex不会让子项自动获得定位能力。
常见错误现象：
- 只写
.item { z-index: 10; }，没加position: relative - Vue/React中动态切换class，只加了
z-index类，漏掉定位类 - DevTools里Computed面板显示
position: static，但样式表里明明写了relative（说明被其他规则覆盖或重置为initial）
实操建议：
- 临时在DevTools的Styles面板里手动勾选
position: relative，看遮挡是否立刻消失——这是最快验证手段 - 避免用
position: sticky替代relative做兜底，因为滚动后它可能退化为relative，导致z-index行为突变 - 不要依赖父容器的
position声明：父设了relative，子项仍需自己显式声明
父容器或祖先触发了堆叠上下文，子项z-index被锁死
即使你给子项加了position: relative和z-index: 9999，它也可能被盖住——真正拦住它的，是某个父级悄悄创建的“玻璃罩”（即堆叠上下文）。这个罩子一出现，子项的z-index就只能跟同级兄弟比高低，根本无法跨出去挑战header、modal等外部元素。
哪些属性会无声创建堆叠上下文？
-
opacity小于1（哪怕opacity: 0.999） -
transform不是none（包括transform: translateZ(0)、scale(1)、rotate(0)） -
filter不是none（哪怕filter: blur(0)） -
will-change: transform或will-change: opacity isolation: isolate- Flex/Grid容器中，子项设置了非
auto的z-index（如z-index: 0）也会触发
实操建议：
- 在Chrome DevTools中选中被遮挡元素 → «Layout»标签页查看
Stacking context是否为Yes；点右侧Show stacking context可高亮边界 - 逐级点击父节点，在«Computed»里搜
transform、opacity、filter，第一个非默认值就是源头 - 临时注释掉可疑父级的这些样式，遮挡消失就确认是它
修复时该调谁的z-index才真正有效
子元素的z-index再高也没用，它出不去父级上下文。真正决定“这块区域在全局排第几”的，是那个创建了堆叠上下文的父容器自身的z-index值。
使用场景：
- 弹窗内部按钮被header盖住，但header和弹窗不在同一父容器下
- 导航栏用了
transform: translateY(0)做平滑过渡，结果下拉菜单浮不起来 - 卡片组件加了
opacity: 0.99实现抗锯齿，导致右上角标签被兄弟卡片压住
实操建议：
- 如果父容器加
transform或opacity只是为了动效且可删，直接移除——比狂堆z-index数字干净十倍 - 必须保留时，给该父容器加
position: relative+ 合理z-index（比如z-index: 1050），而不是只给子项设9999 - 警惕
z-index: 0：它和z-index: auto语义完全不同——前者只要元素已定位，就会显式创建新上下文；后者不会
移动端和响应式断点里更隐蔽的坑
iOS Safari对transform和opacity更敏感，body或html上一行transform: translateZ(0)就能让整个页面变成一个堆叠上下文，“最高”的弹窗也只在它内部排第一。响应式断点里也常因媒体查询激活了transform或opacity，导致原本正常的层级突然失效。
实操建议：
- 检查
html和body是否被意外加了transform、opacity或filter；iOS下优先删掉它们 - 确保
html有min-height: 100vh，避免fixed元素被裁切 - 所有涉及
position变更的媒体查询，必须成对修改：position+z-index，否则移动端可能退化为static或进入默认层 - 用
getComputedStyle(el).getPropertyValue('z-index')在控制台验证断点生效后的实际值，注意auto和0的语义差异
最麻烦的从来不是写错哪一行CSS，而是得顺着DOM往上点三五层，找到那个没声没息就切断层级链的opacity或transform——它往往藏在你根本没想到的祖先节点里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
