移动端z-index失效主因是父元素创建了层叠上下文，如transform: translateZ(0)，导致子元素z-index仅在内部生效；iOS Safari中还使position: fixed降级为absolute。
移动端 z-index 失效，八成不是数值写小了，而是父元素用 transform: translateZ(0) 或类似写法悄悄创建了层叠上下文，把子元素“锁死”在内部比大小——尤其在 iOS Safari 上，它会直接把 position: fixed 元素降级为 absolute 行为。
为什么 translateZ(0) 在移动端特别危险
这个写法常被当作“开启硬件加速”的惯用技巧，但它在移动端（尤其是 iOS Safari）会静默触发新层叠上下文。一旦父容器加了它，里面所有 z-index 都只在该容器内生效，跨不出去。
- 现象：Modal 里的按钮、下拉菜单、Tooltip 始终被导航栏或背景遮住，哪怕
z-index: 9999也无效 - iOS Safari 特别敏感：只要父级有
transform: translateZ(0)、opacity: 0.99或filter: blur(0)，fixed元素就可能失去定位基准，视觉上“掉层” - DevTools 里看 computed
z-index是灰显或显示(not applicable)，说明它没进入有效层叠上下文 - 临时验证法：注释掉父级的
transform，立刻恢复覆盖——这是最快确认手段
移动端修复必须同时处理定位与上下文
只改 z-index 数值没用；必须让目标元素既“能定位”，又“不被关住”。
- 动态创建的浮层（如 toast、picker）务必显式设置
position: fixed或position: absolute，不能依赖默认static - 若父容器必须保留
translateZ(0)（比如做动画），就把需要浮出的元素提出来：document.body.append(el)，再用 JS 计算top/left定位 - 避免给
fixed元素的父级加transform、perspective、opacity < 1—— iOS 会直接忽略fixed语义 - 使用
will-change: transform前务必确认是否真需要，它和translateZ(0)触发机制一致，同样会建“结界”
Bootstrap / Vue / React 中的典型陷阱
框架组件常自带 transform 或 opacity，导致嵌套浮层失效，不能只调子组件样式。
立即学习“前端免费学习笔记（深入）”；
- Bootstrap
.modal-content默认无transform，但如果你加了fade动画类，它内部用了opacity+transform，就会创建上下文——此时.modal-body里的 CKEditor 工具栏必须整体提升，而不是只调.ck-toolbar-container - Vue 的
v-if切换后，JS 动态插入的弹窗若没同步设position和z-index，就会被盖住；推荐在mounted钩子中统一补全样式 - React 中用
createPortal挂载到document.body是最稳妥方案，但要注意滚动偏移：监听window.scrollY并更新top值
真正难的不是堆数字，而是看清哪一层“结界”把你卡住了。移动端调试时，先关掉所有动画相关 CSS，再逐行打开，比盲目加 !important 省 7 小时。
