加了 transform: translateZ(0) 后 z-index 失效，因其触发层叠上下文，子元素 z-index 被限制在该上下文中；修复需移除父级 transform、提升容器 z-index 或将弹层挂载至 body。
为什么加了 transform: translateZ(0) 后 z-index 突然不灵了
因为 translateZ(0) 不是“无害的”，它会让元素立刻创建新的层叠上下文（stacking context），子元素的 z-index 就被锁死在这个“小盒子”里，再高也出不去。你看到弹窗被盖住、下拉菜单穿不透卡片，八成就是这个原因。
常见现象包括：
- 父容器加了
translateZ(0)做硬件加速，内部z-index: 9999的 tooltip 却被隔壁没动过的 header 盖住 - Vue/React 组件封装深，某层 wrapper 悄悄带了
transform: scale(1)，导致所有子级弹层失效 - Chrome DevTools 的 Computed 面板里，目标元素的
z-index显示为(not applicable)或灰显
怎么快速确认是不是 translateZ(0) 搞的鬼
打开浏览器开发者工具，从出问题的元素开始往上点父节点，每点一个就看右侧面板 Layout 标签页里的 Stacking context 是否突然变成 Yes —— 特别注意那些没写 z-index 却突然“结界成型”的节点。
重点检查这些属性是否非默认值：
立即学习“前端免费学习笔记（深入）”；
-
transform（哪怕只是translateZ(0)、scale(1)、rotate(0.001deg)） -
opacity（0.99就够，不用0.5才触发） -
filter（blur(0.1px)、drop-shadow(0 0 0 #000)都算） -
will-change: transform或will-change: opacity
临时注释掉可疑父级的 transform，如果遮挡消失，基本就坐实了。
修复时别只改子元素的 z-index
子元素再堆 z-index: 999999 也没用，它的层级上限被父级的层叠上下文卡死了。真正有效的动作是：
- 删掉父级的
translateZ(0)—— 如果只是为了硬件加速且无动画依赖，这是最干净的解法 - 把需要“突围”的元素（比如
dropdown、tooltip）用position: fixed+z-index挂到body下（注意同步处理滚动偏移和定位坐标） - 如果多个模块共用一个带
transform的容器，不如直接给该容器设z-index: 100，整体抬高，比在内部疯狂调数字更可控
特别注意：z-index: 0 和 z-index: auto 效果不同——前者会创建新上下文，后者不会（前提是元素已定位）。所以别随手给父级加 z-index: 0 来“试试”，反而雪上加霜。
translateZ 在 3D 场景下根本不用 z-index
如果你用了 transform-style: preserve-3d，或者子元素本身有 translate3d、rotateX，那 z-index 就彻底退居二线了。浏览器优先按 Z 轴坐标渲染：数值越大越靠近用户，自然压在前面。
这时候应该：
- 统一用
transform: translateZ(40px)控制前后顺序，而不是混用z-index和translateZ - 确保父容器有
transform-style: preserve-3d，否则子元素的 3D 位移会被拍平 - 避免在一个 3D 容器里同时靠
z-index和translateZ排序，行为不可预测
最常被忽略的一点：你改的是子元素的 translateZ，但真正决定渲染顺序的，是它相对于其最近的 preserve-3d 父容器的 Z 值。父容器自己没开 3D，子元素再怎么写 translateZ 也白搭。
