z-index在移动端失效主因是元素未定位或被祖先节点创建的层叠上下文限制；需确认position非static，并排查opacity
z-index 在移动端失效，99% 不是数值写小了，而是元素没定位，或被某个祖先节点悄悄关进了独立层叠上下文里——它再高，也出不去那个盒子。
确认目标元素是否已定位（position 非 static）
浏览器压根不读 z-index，只要元素的 position 是 static（默认值）。这不是“效果弱”，是“不参与层叠计算”。
- 用 Chrome DevTools 选中元素，在 «Computed» 面板搜
position，若显示static，z-index就等于没写 - JS 动态插入浮层（如 toast、picker）时，常只设
z-index，漏掉position: fixed或position: absolute - Vue/React 中 class 切换后，响应式样式可能把
position覆盖回static；建议在mounted或useEffect中显式补全 -
display: flex容器里的子项，能用z-index控制内部顺序，但前提是自己已设position非static
排查谁在创建“结界”：stacking context 的真实来源
只要某个祖先节点满足以下任一条件，它就静默创建了新的层叠上下文，把子元素锁死在里面比大小：
-
opacity小于 1（哪怕opacity: 0.999） -
transform不为none（包括transform: translateZ(0)、scale(1)、rotate(0.0001deg)） -
filter不为none（哪怕filter: blur(0)或filter: opacity(1)） -
will-change: transform或will-change: opacity isolation: isolate
在 Chrome DevTools 的 Elements 面板中逐级点击父节点，右侧面板 «Layout» 标签页下看 «Stacking context» 是否突然变成 Yes；重点盯那些“没写 z-index 却显示 Yes”的节点。
iOS Safari 中 fixed 元素被降级，要特别防 body/html 上的 transform
iOS Safari 对 body 和 html 的渲染限制极严：
-
body { overflow: hidden }→ 导致position: fixed元素滚动时被裁切 -
html { transform: translateZ(0) }→ 整个文档变成一个层叠上下文，“全局最高”的弹窗也只在它内部排第一 - 只要父容器有
transform、opacity 或 <code>filter，iOS Safari 就可能忽略position: fixed的语义，让它退化为absolute
快速验证：打开 Safari Web Inspector 或 Chrome Remote Debugging，逐级点击 html → body → 根容器，看 «Computed» 里是否有 stacking context: yes；修复优先级：先删 body 和 html 上所有 transform、opacity、filter，再确保 min-height: 100vh 存在。
临时验证和长期解法：别堆数字，要提级或绕开
真正难的不是写多大的 z-index，而是看清哪一层“结界”把你卡住了。
- 临时验证最快方式：注释掉疑似父级的
transform或opacity，观察遮挡是否立刻消失 - 若父容器必须保留
translateZ(0)（比如做动画），就把需要浮出的元素提出来：document.body.append(el)，再用 JS 计算top/left定位 - React 中推荐用
createPortal挂载到document.body；Vue 中可用<teleport to="body"></teleport>；注意监听window.scrollY并更新定位偏移 - Bootstrap / Vue 组件的过渡动画类（如
.fade）常自带opacity+transform，导致嵌套浮层失效——不能只调子组件样式，得整体提升容器层级
复杂点在于：同一个页面里，多个模块可能各自触发 stacking context，而你只能靠 DevTools 一层层点进去看「Stacking context」字段变色；最容易被忽略的是那些看似无害的 transform: scale(1) 或 opacity: 0.999 ——它们不会报错，也不会在 CSS 文件里显眼地标出“我建了结界”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
