fixed元素相对于父级定位不是浏览器bug，而是CSS规范要求：当祖先元素设置transform、filter、perspective、backdrop-filter或will-change（含transform相关值）时，会创建新包含块，使fixed退化为类似absolute的定位行为。
为什么fixed元素会突然相对于父级定位
不是浏览器bug，是CSS规范明确要求：只要任意祖先元素设置了transform、filter、perspective、backdrop-filter或will-change（含transform相关值），就会强制创建新的包含块（containing block），导致position: fixed退化为类似absolute的行为——即相对于该祖先定位。
常见陷阱包括：transform: translateZ(0)、filter: opacity(1)、will-change: transform，甚至第三方组件（如Ant Design的Drawer、Element Plus的Dialog）内部默认加了这些属性，你没写 ≠ 它没加。移动端还要额外注意overflow-scrolling: touch在iOS Safari中等效触发该机制。
如何快速定位是哪个祖先搞的鬼
打开Chrome DevTools → Elements面板 → 选中你的fixed元素 → 往上逐层检查每个祖先的Computed样式：
- 重点看
transform是否为none；别漏掉transform: rotate(0)、transform: matrix(1, 0, 0, 1, 0, 0) - 顺手查
filter（哪怕只是filter: opacity(1)）、will-change（如will-change: scroll-position） - Safari开发者工具里会直接标出「Fixed position containing block」，一眼可见
修复fixed偏移最稳的方式：移出干扰父级DOM
把fixed元素从带transform的容器里“剪出来”，挂到document.body下，副作用最小：
立即学习“前端免费学习笔记（深入）”；
- React中用
createPortal渲染到document.body - Vue 2/3在
mounted或onMounted里调用document.body.append(this.$el)或document.body.appendChild(el) - 纯HTML就手动把
<div class="fixed-btn">移到<body>底部 - 务必确保样式选择器不依赖原DOM结构（比如别用
.modal .fixed-btn，改用独立类名如.global-fixed-btn） - 显式设置高
z-index（如z-index: 2147483647），避免被其他body子元素遮挡
不想动DOM？替代方案的代价必须清楚
有些场景不能移出DOM（比如fixed元素需响应父级状态），这时可尝试绕过transform，但要承担风险：
-
will-change: opacity或will-change: scroll-position有时能替代transform: translateZ(0)触发硬件加速，但并非所有浏览器都支持 - 用
position: sticky替代fixed，但要注意它依赖滚动容器，且不支持bottom: 0在所有场景（尤其iOS Safari） - 改用
absolute+relative容器模拟，但需手动监听focusin/blur、处理键盘弹起高度、同步window.innerHeight变化，逻辑更重
真正棘手的是混合场景：viewport设置正确 + 无干扰祖先 + 仍错位——这时候得查box-sizing是否影响宽高计算，或确认document.documentElement.clientWidth是否被缩放干扰，而不是继续在定位属性上打转。
