position: fixed元素定位基准变为祖先元素而非视口，是因为其任意祖先设置了transform（如translatez(0)）、filter、perspective、backdrop-filter、opacity
transform 非 none 会创建新 containing block，fixed 就不认视口了
这不是 bug，是 CSS 规范明确写的：position: fixed 元素的定位基准（containing block）默认是视口；但只要任意祖先元素的 transform 值不是 none，它就会成为新的 containing block。此时 fixed 行为等同于 absolute——它“卡”在那个 transform 父容器里，滚动时跟着动、top/left 相对父容器生效。
常见触发值包括：transform: translateZ(0)、transform: scale(1)、transform: rotate(0deg)，哪怕视觉上没变化，也已生效。而 transform: none 或 transform: unset 是安全的。
哪些属性和 transform 一样危险？别只盯着 transform
除了 transform，以下属性只要计算值不为默认/空值，同样会创建新 containing block，导致 fixed 失效：
-
filter（哪怕filter: blur(0)或filter: opacity(1)—— 注意后者语法无效，但opacity(.99)就够） -
perspective（任何非none值） -
backdrop-filter（iOS Safari 尤其敏感） -
will-change: transform（单独写不会触发，但常与transform同时存在，容易误判） -
opacity小于 1（注意：这是opacity属性本身，不是filter）
排查时用 DevTools 的 Computed 面板逐层看这些属性的最终值，比猜更可靠。
为什么用 transform: translateZ(0) 开硬件加速最坑？
很多项目加 transform: translateZ(0) 就为了“强制 GPU 加速”，但它悄悄把整个子树的定位上下文重置了。尤其当它加在 body 或全局 layout wrapper 上时，所有 fixed 导航、弹窗、悬浮按钮全受影响。
替代方案更稳妥：
- 用
will-change: opacity或will-change: scroll-position替代，它们不改变 containing block - 只对真正需要动画的元素加
transform，避免污染父级布局容器 - 如果必须用
translateZ(0)，确保它不落在fixed元素的任意祖先链上
移动端 Safari 对 fixed + transform 更挑剔
iOS 14.5–16.x 和旧版 Chrome（如 87 之前）中，fixed 在 transform 容器内可能出现闪动、错位、甚至完全不可见。这不是渲染延迟，而是这些引擎对 containing block 切换的处理不一致。
关键应对点：
- 避免在
body或html上直接设transform—— 这是移动端最常踩的雷 - 使用
position: sticky+top: -100vh模拟固定效果，兼容性更好 - 若必须 JS 控制位置，记得监听
scroll和resize，并用getBoundingClientRect()而非pageYOffset计算视口坐标
真正难搞的是微前端或嵌套 SSR 场景：主应用加了 transform，子应用又挂了个 fixed 按钮——这时候 DOM 层级协商比 hack 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
