手机端z-index无效主因是元素未参与层叠计算：最常见为position仍为static；其次为祖先节点静默创建层叠上下文（如opacity
为什么手机端z-index写了却没用
不是数值太小，而是元素压根没参与层叠计算——最常见原因是 position 仍为 static（默认值），浏览器直接忽略 z-index。移动端尤其容易因响应式样式、框架 class 切换或 JS 动态插入漏掉定位声明。
- 用 Chrome DevTools 或 Safari Web Inspector 选中目标元素，在 «Computed» 面板搜
position，确认最终值是relative、absolute、fixed或sticky - 检查是否被
@media覆盖：桌面端写了position: fixed，但移动端媒体查询里没补，回退成static - Vue/React 中动态 class 可能移除了定位样式，真机调试时务必看实时 computed 值
- 临时加
position: relative（不带偏移）验证，若层级立刻恢复，说明就是定位缺失
怎么找到那个“关住z-index”的父元素
99% 的失效源于某个祖先节点静默创建了层叠上下文（stacking context），子元素的 z-index 只在它内部比大小，出不去。这个“结界”常由看似无害的属性触发。
- 在 DevTools Elements 面板逐级点击父节点，右侧面板 Layout 标签页下看「Stacking context」是否突然变成
Yes - 重点盯这些属性：
opacity小于 1（哪怕opacity: 0.999）、transform不为none（包括translateZ(0)、scale(1)）、filter不为none、will-change设为transform或opacity、isolation: isolate - 特别注意
body和html：iOS Safari 下html { transform: translateZ(0) }会让整个页面变成一个层叠上下文，“最高”的弹窗也只在它内部排第一 - 临时注释掉可疑父级的
transform或opacity，观察遮挡是否立刻消失——这是最快定位手段
iOS Safari 下 fixed 元素被降级怎么办
iOS Safari 对 transform 和 fixed 的组合极度敏感：只要父容器有 transform（哪怕只是 translateZ(0)），又没显式设 z-index，position: fixed 元素就可能退化为 absolute 行为，视觉上“掉层”。
- 修复方式：在触发
transform的父容器上，**同时加position: relative和z-index: 0** ——不能只靠transform强制硬件加速却不设z-index - 避免给
fixed元素的直接父级加transform、opacity 或 <code>filter，iOS 会直接忽略fixed语义 - 测试必须用真机，模拟器常无法复现；Safari Web Inspector 的 «Layers» 面板可直观看到哪些节点标为 “Stacking Context”
- 如果必须保留父级
transform（如轮播图 wrapper），就把需要浮出的元素（如 tooltip、picker）用document.body.append(el)提出来，再用 JS 计算位置
video 标签穿透所有 z-index 怎么办
<video></video> 在 iOS Safari 和安卓微信 X5 内核中被当作原生控件强行渲染在最顶层，不参与标准层叠上下文——你写 z-index: 9999 没用，它根本不在同一个渲染平面。
- 安卓微信里
x5-playsinline是个坑：它不是启用同层播放，而是强制置顶，必须移除；只保留x5-video-player-type="h5-page" - iOS Safari 下，仅
webkit-playsinline不够，需双写：webkit-playsinline+playsinline，并给<video></video>自身加transform: translateZ(0)+will-change: transform+position: relative+ 明确z-index（如z-index: 2） - 悬浮层（如弹窗）必须设
position: fixed+z-index（如z-index: 10），且数值要大于视频自身z-index - 部分旧版安卓浏览器会调用系统播放器，绕过 DOM 渲染层，此时唯一可靠方案是操作前主动隐藏
<video></video>容器（display: none）
真正难的不是堆数字，而是看清哪一层“结界”把你卡住了——尤其是 body、html、轮播 wrapper 这些容易被忽略的顶层容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
