z-index不生效主因是父容器创建了堆叠上下文，子元素z-index仅在其最近堆叠上下文中有效；需检查父级是否含position+z-index、opacity、transform等触发属性，并通过layers面板验证层级。
z-index 不生效？先检查父容器的 stacking context
移动端浮层 z-index 看似设了却压不住其他元素，八成是被父级创建的 stacking context 截断了。CSS 的层叠顺序不是全局 flat 的，而是按 stacking context 分层嵌套的——子元素的 z-index 只在它**最近的 stacking context 父容器内生效**。
常见触发 stacking context 的属性：position: relative/absolute/fixed + z-index（非 auto）、opacity 小于 1、transform 非 none、filter、will-change 等。尤其注意：iOS Safari 对 transform: translateZ(0) 也敏感，可能意外创建新层叠上下文。
- 检查浮层的直接父元素是否带
z-index且值过小（比如z-index: 1），而你给浮层设了z-index: 9999——没用，它仍被锁死在父级 context 内 - 若父容器用了
opacity: 0.99或transform: scale(1)，它已自建 context，此时需把z-index提到该父容器上，而非只动子浮层 - 用 Chrome DevTools 的 Layers 面板（或 Safari 的 3D View）直观查看 stacking context 层级，比猜更准
移动端 touch 交互下浮层被遮挡？警惕 fixed 定位与 viewport 缩放冲突
position: fixed 是移动端浮层常用方案，但 iOS Safari 在用户双指缩放或地址栏收起/展开时，会临时重置 fixed 元素的定位基准，导致浮层错位甚至被 header / keyboard 挡住。
这不是 z-index 问题，而是定位坐标系漂移。尤其当页面 viewport 设置了 user-scalable=yes 或未锁定宽度时，风险更高。
立即学习“前端免费学习笔记（深入）”；
- 强制锁定 viewport：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">（需权衡 UX） - 避免对
fixed浮层父容器使用transform或perspective，它们会让 iOS 把 fixed 元素转为 absolute 行为 - 关键浮层（如弹窗、菜单）建议用
position: absolute+ JavaScript 动态计算top/left，配合resize和scroll事件更新位置（虽稍重，但可控）
多个浮层叠加时 z-index 值怎么设才不乱？用 CSS 自定义属性统一管理
硬写 z-index: 9999、z-index: 99999 看似省事，实则埋雷：后续加个 toast、loading、tooltip 就得翻代码找最大值，还容易和第三方库冲突（比如某些 UI 组件默认用 z-index: 2147483647）。
真正可持续的做法是建立层级语义体系，用 CSS 自定义属性做“常量”管理：
:root {
--z-modal: 1000;
--z-toast: 1010;
--z-dropdown: 1020;
--z-tooltip: 1030;
}
然后组件里直接引用：z-index: var(--z-modal);
- 预留间隙（比如每档差 10），方便中间插入新类型浮层
- 所有业务浮层必须从这套变量取值，禁止直接写数字
- 第三方组件的
z-index若过高，用!important覆盖时务必同步更新对应变量注释，避免下次误删
安卓 WebView 和 iOS WKWebView 的 z-index 渲染差异
同一套 CSS，在安卓原生 WebView（尤其旧版）和 iOS WKWebView 上可能表现不同：前者对 stacking context 更宽松，后者更严格；部分安卓机型对 z-index 负值支持异常，iOS 则对 transform-style: preserve-3d 下的层级更敏感。
这不是 bug，是渲染引擎实现差异。最稳妥的兼容策略是「降级防御」：
- 浮层必加
backface-visibility: hidden，减少 GPU 渲染歧义 - 避免依赖负
z-index实现遮罩（比如用z-index: -1把背景压到最底），改用正向递增体系 - 在 iOS 上，如果浮层内含
iframe或video，它们天然具有高 stacking priority，需额外给浮层加transform: translateZ(0)强制提升层级（但注意这又可能触发新 stacking context）
复杂点往往不在数值本身，而在 stacking context 的嵌套深度和平台对合成层的判定逻辑——多一层 parent，就多一次层级重置风险。
