CSS规范要求transform非none会创建新包含块，使fixed元素锚定父级而非视口；触发值包括translateZ(0)、scale(1)、rotate(0deg)等，filter、opacity
因为 transform 值不为 none 会强制创建新包含块，使 position: fixed 元素的定位基准从视口降级为该父元素——这不是 bug，是 CSS 规范明确要求的行为。
哪些 transform 值会触发 fixed 失效
只要计算值不是 none，哪怕视觉上毫无变化，也会生效：
-
transform: translateZ(0)（最常见，常被误用作“开启硬件加速”） -
transform: scale(1)、transform: rotate(0deg)、transform: translateX(0) -
transform: perspective(1px)或任何非none的perspective -
will-change: transform单独写不会触发，但若和transform同时存在，实际生效的是后者
为什么只查 transform 不够？还得看这些属性
以下属性和 transform 具有完全相同的“破坏力”，都会创建新包含块，导致 fixed 相对父级定位：
-
filter：哪怕filter: blur(0)、filter: opacity(1)（语法错误也常被解析为非 none） -
opacity：只要小于1，比如opacity: 0.99 -
backdrop-filter：哪怕值为none，某些 iOS Safari 版本仍会触发 -
overflow-scrolling: touch：仅 iOS Safari，不影响其他浏览器，但极易漏查
怎么快速定位是哪个父级在“搞破坏”
别靠猜 DOM 结构，用 Chrome DevTools 实操排查：
立即学习“前端免费学习笔记（深入）”；
- 选中失效的
fixed元素，在 Elements 面板按住 Shift 并连续点击右上角箭头，逐层跳转父节点 - 每到一层，切到 Computed 标签页，搜索
transform、filter、opacity、backdrop-filter - 重点盯
transform: translateZ(0)和第三方组件内部默认加的transform: translateX()（如 Ant DesignDrawer、Element Plusel-dialog） - 真机测试时务必检查软键盘弹出、横屏、缩放三者叠加场景，模拟器往往不暴露问题
修复不能只靠加 transform: none !important
这个写法能验证问题，但上线后会破坏动画、图层合成或滚动性能，属于伪解法。真正可靠的路径只有：
- 用
createPortal（React）或<teleport to="body"></teleport>（Vue）把fixed元素挂到下，彻底脱离干扰链 - 优先改用
position: sticky（如top: 0），它不受transform影响，现代浏览器支持良好 - 极少数必须保留在局部 DOM 中的场景，才考虑
position: absolute+ JS 监听scroll/resize，但要注意软键盘弹出时window.innerHeight突变、getBoundingClientRect()读取时机抖动等问题
最容易被忽略的是：框架组件库内部悄悄写的 transform，你没声明，但它执行了；还有全局缩放容器（如 #scale-box）对所有子级的静默影响。DOM 结构和样式一样重要，修复 fixed 失效，本质是修复包含块污染。
