transform非none（含translateX(0)、scale(1)等）必触发新堆叠上下文，使内部z-index仅在该上下文中生效，无法与外部元素比较层级；需通过开发者工具验证或移除transform定位问题。
transform 会创建新的堆叠上下文，不是 bug，是规范强制行为——只要 transform 值不为 none（哪怕只是 translateX(0) 或 scale(1)），浏览器就必须为其建立独立的层叠上下文。
哪些 transform 值会触发层叠上下文
所有非 none 的 transform 值都会触发，包括看似“无效果”的写法：
-
transform: translateX(0)→ 触发 -
transform: translateY(0)→ 触发 -
transform: scale(1)→ 触发 -
transform: rotate(0deg)→ 触发 -
transform: translateZ(0)→ 触发（常被误用作 GPU 加速开关） -
transform: none→ 不触发（唯一安全值）
注意：transform-style: preserve-3d 本身不直接创建上下文，但它会让子元素的 transform 更容易累积并间接促成多层嵌套上下文，调试时需连带检查父级。
为什么 z-index 在 transform 元素内部“失效”了
因为 z-index 只在当前层叠上下文中起作用。一旦父元素有了 transform，它就变成一个“围起来的小世界”，里面的 z-index: 9999 和外面的 z-index: 2 根本不在同一张“排行榜”上。
立即学习“前端免费学习笔记（深入）”；
- 常见错误现象：
position: fixed导航栏被带transform的轮播图盖住 - Grid 容器加了
transform后，所有grid-item的z-index都只在容器内排序，无法突破边界 - React 组件里用了动画库（如 Framer Motion），底层自动加了
transform，导致弹窗被遮挡
关键不是数值不够大，而是层级归属错了——你调高的是“小房间里的排名”，但真正要赢的是“整栋楼的楼层顺序”。
如何验证和定位问题
别靠猜，用浏览器开发者工具确认：
- 在 Elements 面板选中元素，看 Computed 样式里是否出现
stacking context提示（Chrome / Edge 显示为 “Stacking context: yes”） - 打开 Layers 面板（
More Tools → Layers），观察是否生成了额外的渲染层（Render Layer） - 临时删掉
transform，看遮挡是否消失——这是最快速的因果验证
特别注意：某些 CSS-in-JS 库或 UI 框架会在 hover、focus 等状态里动态插入 transform，这类“条件性触发”最难排查。
真正有效的修复路径
不要给父容器加 z-index 再去调子元素的 z-index，那只会把它锁死在更小的上下文里。
- 若目标是覆盖
position: sticky或fixed元素：直接给该元素显式创建更高层级的上下文，例如position: relative; z-index: 1000;（无需transform） - 若必须保留动画效果：改用
will-change: transform替代硬加transform，并在动画结束后清除（如用transitionend事件移除 class） - 若涉及复杂嵌套（如 Grid + transform + filter）：优先考虑结构拆分，用 Portal / Teleport 把需要浮层的元素提到 body 下，脱离原上下文树
最容易被忽略的一点：多个属性叠加（比如同时有 transform、opacity: 0.99、filter: blur(0.5px)）会创建嵌套更深的上下文链，此时单点修复往往无效，得通盘审视渲染路径。
