transform 会让 fixed 定位“降级”是因为非 none 的 transform 会创建新包含块，使 fixed 元素参照该祖先而非视口定位；包括 translateZ(0)、scale(1) 等看似无效的变换均会触发。
transform 为什么会让 fixed 定位“降级”
这不是 bug，是 CSS 规范明确要求的行为：只要某个祖先元素的 transform 值不是 none，它就会成为新的包含块（containing block），而 position: fixed 元素的定位参照就从视口（viewport）变成这个祖先元素。
根本原因在于，transform（包括 translateZ(0)、scale(1)、rotate(0) 等）会创建新的层叠上下文（stacking context）和包含块。CSS 规范规定，fixed 元素的包含块，必须是“最近的建立了包含块的祖先”，而不是无条件指向视口。
常见错觉是“我只加了硬件加速，没动位置”，但 transform: translateZ(0) 已足够触发该行为——它不改变视觉，却悄悄重置了定位坐标系。
哪些 transform 值会触发这个问题
几乎所有非 none 的 transform 都会，包括那些看起来“没效果”的写法：
立即学习“前端免费学习笔记（深入）”；
-
transform: translateZ(0)—— 最隐蔽，常被用作强制 GPU 加速 -
transform: scale(1)、transform: rotate(0deg)、transform: translateX(0) -
transform: matrix(1,0,0,1,0,0)这类等效恒等变换 -
will-change: transform单独不会，但常与真实 transform 共存，容易误判根源
transform: none 和 transform: unset 是安全的，但要注意继承链中是否有父级覆盖。
怎么快速定位是哪个 transform 在搞鬼
别猜，用 Chrome DevTools 实锤：
- 选中失效的
position: fixed元素 - 按住 Shift 并连续点击右上角的“向上箭头”图标，逐层跳转到祖先节点
- 每进一层，切到 Computed 标签页，搜索
transform，看值是否为none - 同步检查
filter、backdrop-filter、opacity（will-change，它们有同等效果
特别注意第三方组件（如 Ant Design 的 Drawer、Element Plus 的 el-dialog）内部默认加的 transform，你没写，但它写了。
修复时最容易忽略的细节
加 transform: none !important 能验证问题，但绝不能当最终解法——它可能破坏动画、滚动性能或组件内部逻辑。
真正有效的修复，往往要动 DOM 结构：
- React 中用
createPortal渲染到document.body下 - Vue 中在
mounted钩子调用document.body.appendChild(el) - 纯 HTML 就把 fixed 元素移到
<body>底部，并确保样式类名不依赖原层级（比如避免.modal .fixed-btn） - 显式设置高
z-index（如z-index: 2147483647），防止被其他body子元素遮挡
移动端还要额外提防：overflow-scrolling: touch 在旧版 iOS Safari 中会被等效为 transform 触发条件；全局 JS 缩放（如动态设置 #scale-box 的 transform: scale()）会污染整个子树。
