transform: translateZ(0) 不提升层级，而是创建新层叠上下文，使子元素 z-index 仅在该上下文中生效，无法与外部元素比较，导致遮挡关系不稳定。
直接说结论：transform: translateZ(0) 本身不会“提升层级”，它只是**悄悄创建了一个新的层叠上下文（stacking context）**，而这个新上下文的根节点（即该元素自身）的层叠顺序，可能比周围元素更高——于是子元素看似“浮上来了”，实际是被锁进了新盒子，和外部比不了。
为什么 translateZ(0) 会让 z-index 表面“生效”又实际混乱
这是最典型的误用场景：给父容器加 transform: translateZ(0)，再给子元素设 z-index: 999，发现它盖过了别的组件；但一动鼠标或切个 tab，遮挡关系就错乱。原因很明确：
-
translateZ(0)触发新层叠上下文，父容器变成该上下文的“根” - 子元素的
z-index只在父容器内部起作用，不再参与全局比较 - 如果父容器自身
z-index是auto或未显式设置，它的默认层叠等级可能低于兄弟容器（比如导航栏），导致整个盒子被压住 - 过渡动画中，浏览器可能临时重排层叠树，让上下文边界更不稳定
怎样正确用 translateZ(0) 配合 z-index
如果你确实需要硬件加速（比如为动画提性能），又想保持层级可控，必须把“提层”动作落在上下文根上，而不是子元素：
- 给触发
translateZ(0)的父容器本身加z-index（且值要大于它同级的竞争对手） - 确保该父容器已定位：
position: relative或absolute，否则z-index无效 - 避免在同一个父容器上既加
translateZ(0)又加opacity: 0.99——两个都触发上下文，纯属叠buff自锁 - 临时验证方法：删掉
translateZ(0)，看子元素是否立刻按预期显示；若恢复后正常，说明问题就在上下文隔离
比 translateZ(0) 更稳妥的替代方案
除非真有性能瓶颈，否则优先考虑不触发上下文的方式：
- 用
will-change: transform替代translateZ(0)—— 它只提示浏览器优化，不强制创建上下文（但注意：若元素已定位且z-index显式设置，will-change仍可能间接影响） - 动画期间用
position: fixed临时脱离文档流（需手动处理坐标），避开所有父级上下文干扰 - 对关键浮层（如 Tooltip、Modal），直接挂载到
body下（React 的createPortal/ Vue 的Teleport），从根源上绕过布局容器的上下文污染
真正麻烦的从来不是 z-index 值写多大，而是你根本没意识到那个加了 translateZ(0) 的 div 已经成了“独立王国”——它的子元素再怎么喊 z-index: 999999，也出不了门。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
