z-index在响应式布局中失效，主因是媒体查询中激活的transform、opacity或filter静默创建新层叠上下文；常见诱因包括translateZ(0)、flex/grid切换、opacity与z-index混用、position变更未同步z-index等。
z-index 在响应式布局里失效，几乎从不因为媒体查询里写错了数值，而是某个断点中被激活的 transform、opacity 或 filter 静默创建了新层叠上下文，把目标元素“锁”进了独立盒子。
响应式断点里突然生效的 transform 是最大嫌疑
很多响应式动画会加 transform: translateZ(0) 或 scale(1) 强制 GPU 加速，但只要值不是 none，就触发新层叠上下文。哪怕只在 @media (max-width: 768px) 里启用一行，父容器立刻变成 stacking context 根节点。
- 用 DevTools 切到对应断点，在 «Computed» 面板搜
transform，看是否从none变成了具体值 - 临时注释掉媒体查询里的
transform，遮挡是否立刻消失？是 → 就是它 - iOS Safari 对
translateZ(0)更敏感，比 Chrome 更早“结界化”，移动端要优先排查
flex/grid 容器在断点中启用后子项 z-index 行为突变
容器从 display: block 切换为 display: flex 或 grid 时，子项虽可参与层叠，但若父容器自身同时满足触发条件（比如 opacity: 0.99），整个子项组就被隔离了。
- 别依赖“flex 子项自动有层级”，显式给关键子项加
position: relative+z-index - 避免在 flex 容器上同时用
opacity和子项z-index：二者叠加 = 双重隔离 - 如果用
order控制视觉顺序，别和z-index混用——order影响绘制顺序，z-index影响层叠顺序，冲突时浏览器优先按order走
媒体查询中改了 position 却漏掉 z-index 同步
常见误操作：桌面端用 position: static，到移动端切为 position: fixed，但忘了补 z-index。结果元素浮起来了，却因没 z-index 值，默认进入当前上下文的“默认层”（通常是第二层），被隔壁 z-index: 10 的 header 盖住。
立即学习“前端免费学习笔记（深入）”；
- 所有涉及
position变更的媒体查询，必须成对修改：position+z-index - 用
getComputedStyle(el).getPropertyValue('z-index')在控制台验证断点生效后的实际值，注意auto和0的语义差异：z-index: 0会强制创建新上下文，z-index: auto不会（前提是元素已定位） -
z-index: -1会让元素沉到父上下文的背景和边框之下，在响应式切换中极易导致“突然消失”
真正难的不是算清哪个断点该写多少，而是每次改完媒体查询，都要往上多看两层 DOM，确认那个刚被激活的 transform 或 opacity 没把你需要突出的元素关进盒子。
