z-index在响应式中失效主因是媒体查询激活的transform/opacity/filter创建了新层叠上下文；需检查computed面板中transform是否从none变为具体值，临时注释验证，并在父容器加z-index:0而非子元素。
z-index 在响应式场景中失效，几乎从不因为媒体查询里写错了数值，而是某个在断点中被激活的样式（比如 transform、opacity 或 filter）悄悄创建了新的层叠上下文，把目标元素“锁”进了一个独立层级盒子。
响应式断点里突然出现的 transform 是最大嫌疑
很多响应式动画用 transform: translateZ(0) 或 scale(1) 强制 GPU 加速，但只要值不是 none，就会触发新层叠上下文。哪怕只在 @media (max-width: 768px) 里加了一行，父容器就立刻变成 “Yes” 的 stacking context 根节点。
- 检查 DevTools 的 «Computed» 面板，切到对应断点，搜
transform—— 看是否从none变成了具体值 - 临时注释掉媒体查询里的
transform，观察遮挡是否消失；恢复后加z-index: 0到该父容器上，而非子元素 - 移动端尤其注意：
translateZ(0)在 Safari 中对层叠影响更敏感，比 Chrome 更早“结界化”
flex/grid 容器在断点中启用后，子项 z-index 行为突变
当一个容器从 display: block 切换为 display: flex 或 grid，它的子项即使没设 position，也可能因 flex item 的隐式定位规则参与层叠——但此时若父容器自身又满足触发条件（如 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: -1：它会让元素沉到父上下文的背景和边框之下，在响应式切换中极易导致“突然消失”
真正难的不是算清哪个断点该写多少，而是每次改完媒体查询，都要往上多看两层 DOM，确认那个刚被激活的 transform 或 opacity 没把你需要突出的元素关进新盒子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
