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，导致弹窗被遮挡

关键不是数值不够大，而是层级归属错了——你调高的是“小房间里的排名”，但真正要赢的是“整栋楼的楼层顺序”。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

如何验证和定位问题

别靠猜，用浏览器开发者工具确认：

• 在 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)）会创建嵌套更深的上下文链，此时单点修复往往无效，得通盘审视渲染路径。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！