Safari中transform（含translateZ(0)）会强制创建层叠上下文，使z-index仅在该上下文内生效；修复fixed元素被穿透需同时加translate3d和will-change，且应挂载至body并监听滚动。
直接说结论：Safari（包括 iOS 微信、Mac Safari）里，只要元素用了 transform（哪怕只是 translateZ(0)），它就自动创建新层叠上下文，导致自身和祖先的 z-index 失效——这不是 bug，是规范行为，但表现和其他浏览器不一致。
为什么 transform 会让 z-index 突然不生效
不是 Safari “不支持” z-index，而是它严格按 CSS 层叠上下文规则执行：transform 不为 none 的元素会建立独立的“层叠房间”，里面所有子元素的 z-index 只在这个房间内比大小，无法越过墙壁影响外面。常见触发点包括：
-
transform: rotateY(10deg)、perspective(300px)、scale(0.95)等任意非none值 -
will-change: transform或opacity: 0.99（哪怕没动 transform，也会隐式创建上下文） - 父级设置了
transform，子元素即使没设，也会被锁进这个上下文里
验证方法：Chrome DevTools → 选中元素 → 「Computed」面板搜 stacking context，标有 This element establishes a stacking context 的就是“房间墙壁”。
给 fixed 元素加 translateZ 覆盖 transform 元素
当 position: fixed 的弹窗/遮罩被带 transform 的内容穿透时，最稳妥的修复是让 fixed 元素也进入 3D 渲染通道，获得物理 Z 轴优先权：
立即学习“前端免费学习笔记（深入）”；
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须同时加
transform: translateZ(1px)和will-change: transform，单加一个在旧版 Safari 上可能无效 - 不要用
translateZ(0)—— Safari 对 0 值的合成层触发不稳定，容易闪屏或失效 - 如果 fixed 元素已有
transform（比如动画），直接把translateZ()合并进去：transform: translateX(-50%) translateY(-50%) translateZ(2px) - 注意：iOS Safari 中
translateZ()在position: fixed上兼容性差，可降级为transform: translate3d(0, 0, 2px)，兼容性略好
示例：
.modal {
position: fixed;
z-index: 9999;
transform: translate3d(0, 0, 2px); /* 关键 */
will-change: transform;
}避免父级意外创建层叠上下文
很多问题其实不出在目标元素，而出在它的某个看不见的父容器上：
- 检查所有祖先节点是否带
transform、opacity、filter、will-change—— 即使值是none或1，也可能触发上下文 - 临时删掉疑似父级的
transform，看遮挡是否立刻消失；若恢复，则坐实是它建了“墙” - 最彻底解法：把需要高层级的元素（如弹窗、遮罩）直接挂到
<body>下，绕过所有中间容器 - 挂到
body后，记得用 JS 监听scroll和resize动态同步位置，否则 fixed 定位在滚动时会偏移
移动端全屏遮罩漏底或错位的连带问题
在 Safari 中，position: fixed 遮罩还常因两个隐藏因素失效：
-
100vh在 iOS Safari 中会把地址栏高度算进视口，但渲染时不响应地址栏收起，导致底部露白；应改用height: 100%+top: 0+bottom: 0，并监听resize更新 - 任意祖先设了
transform，会让fixed元素相对该祖先定位（而非视口），这是遮罩盖不全的头号原因 - 务必给
<body>加style="overflow: hidden"锁定滚动，防穿透；否则 touchmove 事件可能漏处理，造成遮罩下内容可拖动
真正难的不是写对一行 CSS，而是意识到 Safari 的层叠逻辑是“物理空间优先”，z-index 只是辅助；一旦涉及 transform，就得全程用 translate3d、合成层、DOM 挂载位置来协同控制，缺一不可。
