safari中transform触发新层叠上下文导致z-index“失效”，修复方法是给transform父容器加overflow: hidden，或为transform元素自身添加position和z-index。
为什么Safari里加了transform，z-index就“失效”了
不是z-index没生效，而是transform（包括translateZ(0)、perspective()、rotateY()等）在Safari中会强制创建新的层叠上下文（stacking context），把子元素锁进一个独立渲染盒子。这个盒子里的z-index只和自己兄弟比，不再参与全局层级竞争——比如导航栏z-index: 100和弹窗里的按钮z-index: 9999，一旦按钮父容器用了transform，它就被关进去了，永远盖不过导航栏。
更麻烦的是：iOS Safari 和 macOS Safari 对此特别敏感，哪怕只是transform: scale(1)或will-change: transform，也会触发；而Chrome/Edge通常不这么激进。
常见错误现象：
- 固定定位的
.header { position: fixed; z-index: 100; }被一个带transform的轮播图遮住 - Modal 弹窗里的下拉菜单始终显示在最底层，DevTools 里看到其
z-index计算值是not applicable - 滚动或切换tab后，遮挡关系突然翻转——这是层叠树被重排的典型信号
给触发transform的父容器加overflow: hidden
这是最直接、兼容性最好的修复方式，尤其适用于含perspective或3D transform的场景（如rotateY、translateZ）。Safari 在检测到祖先元素有overflow: hidden（或scroll、auto）时，会放弃“纯3D世界渲染”，回归标准层叠逻辑。
实操建议：
- 找到应用
transform的最近共同父容器（不是body，也不是太深的嵌套节点） - 加上
overflow: hidden，无需改其他样式 - 如果该容器本身需要内容溢出（比如横向滚动），可用
overflow-x: auto; overflow-y: hidden替代 - 注意：不要加在
body或html上，可能破坏全局滚动行为
示例：
.carousel {
transform: perspective(500px) rotateY(20deg);
/* 加这一行就能救活所有子元素的z-index */
overflow: hidden;
}
必须同时设置position和z-index才能让transform生效
很多人只加transform: translateZ(0)想开启硬件加速，却忘了它对层叠上下文的影响是“有条件触发”的：只有当该元素本身已定位（position: relative、absolute等）且z-index显式设值（不能是auto），才会真正创建新上下文——而恰恰是这个“显式z-index”常被忽略。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
所以修复的关键不是删transform，而是管好它的“根”：
- 给应用
transform的元素自身加position: relative（或absolute） - 同时设一个合理的
z-index值，比如z-index: 0或z-index: 1（别用auto） - 这个
z-index值要大于它的同级竞争者（比如导航栏是z-index: 100，那它至少得是101） - 避免在同一个元素上叠加
transform和opacity: 0.99——双重触发，问题加倍
错误写法：.card { transform: translateZ(0); }（未定位，z-index无效，但Safari仍可能建上下文）
正确写法：.card { position: relative; z-index: 1; transform: translateZ(0); }
移动端真机测试不可跳过
模拟器和桌面版 Safari DevTools 常常无法复现真实渲染问题。iOS Safari 对transform和fixed的组合尤其苛刻：它可能把本该position: fixed的弹窗降级为absolute行为，导致滚动时错位+层级错乱。
调试时务必：
- 用真机（iPhone/iPad）打开，手动滚动、切后台再切回、旋转屏幕
- 在 Safari 开发者工具中连上设备，检查目标元素的
getComputedStyle(el).zIndex是否为有效数值（不是auto或not applicable） - 逐级点击父节点，在「Layout」面板确认「Stacking context」何时变成
Yes——那个节点就是“结界入口” - 临时注释掉可疑父级的
transform或opacity，看遮挡是否立刻消失；恢复后再加overflow: hidden或补position+z-index
真正难的从来不是写多大的z-index，而是你根本没意识到那个加了translateZ(0)的<div>，已经成了一个拒绝外部z-index入境的独立王国。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
