这是CSS规范强制行为：父元素transform非none（如translateZ(0)）会创建新包含块，使fixed元素定位基准从视口切换为该父级，视觉效果等同absolute。
父元素设置 transform（哪怕只是 translateZ(0)）会让 position: fixed 元素“退化”为相对该父元素定位，这不是 bug，是 CSS 规范强制行为。
为什么 transform 会让 fixed 变成 relative to 父级
CSS 规范规定：只要一个元素的 transform 计算值不为 none，它就创建一个新的包含块（containing block）。而 position: fixed 的定义是“相对于初始包含块（即视口）定位”，一旦路径上出现新包含块，浏览器必须把定位参考系切换到那个父元素——视觉效果完全等同于 position: absolute。
这意味着：
-
transform: translateZ(0)、scale(1)、rotate(0deg)、matrix(1,0,0,1,0,0)全部触发失效，哪怕没视觉变化 -
transform: none是唯一明确安全的值；unset安全但需确认未被继承覆盖 - 这个机制是继承式的：只要某一层祖先触发，其所有后代
fixed元素全受影响，无论嵌套多深
哪些属性和写法同样危险
别只盯着 transform，以下任意一个在祖先链上生效，都会让 fixed 失效：
立即学习“前端免费学习笔记（深入）”；
-
filter：哪怕blur(0)、opacity(0.99)（注意不是opacity属性本身，而是filter: opacity()） -
opacity小于 1：比如opacity: 0.999，opacity: 1是安全的 -
backdrop-filter：iOS Safari 尤其敏感 -
will-change: transform或will-change: filter：虽不直接创建包含块，但常与问题属性共存，易误判 - iOS Safari 中已废弃的
overflow-scrolling: touch
这些属性都会同时创建新层叠上下文和新包含块，影响范围一致。
怎么快速定位是哪个祖先在搞破坏
别靠猜，用 Chrome DevTools 直接查 computed 值：
- 选中失效的
fixed元素，在 Elements 面板按住 Shift 连续点击右上角箭头，逐层向上跳转父节点 - 每到一层，切到 Computed 面板，搜索
transform、filter、opacity、backdrop-filter，看值是否为none或默认值 - 重点盯
translateZ(0)这类“伪硬件加速”写法——DOM 不动，但定位基准已变 - 第三方组件库（如 Ant Design 的
Drawer、Element Plus 的el-dialog、轮播图组件）内部常默认加transform，你没写，但它写了
真正能上线的修复方式只有两种
临时加 transform: none !important 只能验证问题，不能上线——它可能破坏动画、滚动性能或第三方组件逻辑。
必须选其一：
- 把
fixed元素从transform容器中移出，挂到document.body下：React用createPortal，Vue用Teleport，纯 JS 用document.body.append(el) - 保持 DOM 位置不变时，优先换
position: sticky（如top: 0或bottom: 0），它完全不受transform干扰，现代浏览器支持良好
最麻烦的不是找不到问题，而是问题藏在别人写的代码里——比如微前端主应用给 <html> 加了 transform，子应用的 fixed 按钮立刻失效；真机测试时缩放 + 软键盘 + 横屏三者叠加，问题才彻底暴露。
