响应式中z-index失效的根本原因是父容器触发了层叠上下文，使子元素z-index仅在局部生效；必须将z-index加在最近的、参与全局层叠排序的定位父容器上，而非子元素。
z-index 失效不是数值小，是被父级“关进盒子”了
响应式中 z-index 看似乱，本质是媒体查询里悄悄加了触发层叠上下文（stacking context）的属性，让子元素的 z-index 只在局部生效。比如 @media (max-width: 768px) 里给某个容器加了 transform: scale(1) 或 opacity: 0.99，它立刻变成一个独立“玻璃盒子”，里面再设 z-index: 9999 也盖不住盒子外的兄弟元素。
移动端 Safari 对 transform + z-index 特别敏感
iOS Safari 渲染规则更严格：只要父容器用了 transform（哪怕只是 translateZ(0)），又没显式声明 position 和 z-index，其子元素的层级就可能错乱。这不是 bug，是渲染引擎把该容器提升为独立合成层后，未明确指定其全局排序位置所致。
- 必须给触发
transform的父容器加position: relative（或absolute）和z-index: 0（或更高） - 避免在响应式断点里只改子元素
z-index，却不检查父容器是否已“变质” - 用 Chrome DevTools 的
Layers面板（More Tools → Layers）比对 desktop / mobile 视图，能一眼看出多出来的上下文分组
媒体查询中容易漏查的隐式触发点
这些样式在 PC 上可能没事，一到响应式断点就出问题：
-
filter: blur(0)—— 即使值为 0，仍创建新上下文 -
will-change: transform—— 常用于动画优化，但会提前建上下文 -
isolation: isolate—— 少见但有效，一加即隔离 -
clip-path: inset(0)—— 看似无害，实则触发
临时验证方法：在 DevTools 中右键禁用这些属性，看遮挡是否立刻消失；恢复后，把 z-index 加到该父容器上，而不是子元素。
响应式中该把 z-index 加在谁身上？
答案始终是：加在**最近的、需要参与全局层叠排序的定位容器**上。例如底部导航栏在移动端用 position: fixed，就该写：
.bottom-nav {
position: fixed;
bottom: 0;
z-index: 1000; /* 关键：这里控制全局层级 */
}
.bottom-nav a {
position: relative; /* 子元素只需定位，不加 z-index */
}
如果它的兄弟元素（如轮播图容器）在媒体查询里加了 transform 却没设 z-index，那它默认层级低于 1000；但如果误给轮播图子项狂堆 z-index: 9999，反而会让整个轮播图“盒子”以低层级参与全局排序——这是最常被忽略的因果倒置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
