fixed元素相对于父元素定位是因为祖先元素设置了transform等属性，强制创建新包含块，使其退化为类似absolute的行为；这是css规范规定，非bug。

为什么 fixed 元素突然相对于父元素定位了

因为父级（或任意祖先）设置了 transform、filter、perspective、backdrop-filter、will-change（含 transform 相关值）等属性，浏览器会强制创建新的包含块（containing block），导致子级 position: fixed 不再参考视口，而是退化为类似 absolute 的行为——即相对于该 transform 祖先定位。

这不是 bug，是 CSS 规范明确规定的：只要祖先不是 transform: none，它就成为 fixed 元素的 containing block。哪怕 transform: scale(1) 或 transform: translateZ(0) 这种“视觉无变化”的写法，也完全触发该机制。

如何快速确认是不是 transform 搞的鬼

打开 Chrome DevTools → Elements 面板 → 选中你的 fixed 元素 → 右键 “Scroll into view” → 往上逐层检查每个祖先的 computed 样式：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 重点看 transform 是否为 none；别漏掉 transform: translateZ(0)、transform: rotate(0)、transform: matrix(1, 0, 0, 1, 0, 0)
• 顺手查 filter（哪怕只是 filter: opacity(1)）、will-change（如 will-change: transform）
• 注意第三方 UI 库（Ant Design Drawer、Element Plus Dialog、某些动画组件）常默认加 transform，你没写 ≠ 它没加
• 移动端还要额外检查 overflow-scrolling: touch —— iOS Safari 会把它等效为 transform 触发条件

修复 fixed 偏移最稳的方式：移出 transform 父级 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"> 移到 <code> 底部
• 务必确保样式选择器不依赖原 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) 触发硬件加速，且不创建 containing block —— 但兼容性和效果不稳定，尤其在低端 Android 上
• 用 position: sticky 替代 fixed？它不脱离文档流，也不受 transform 影响，但只在滚动时生效，且不支持所有方向（如无法 bottom + right 同时固定）
• JS 动态同步位置（监听 scroll + resize）？可行但引入性能开销和抖动风险，iOS Safari 下尤其难对齐地址栏收起/展开的视口高度变化
• 千万别用 transform: none !important 覆盖父级 —— 它不解除已创建的 containing block，无效

真正麻烦的从来不是“怎么修”，而是“谁悄悄加了 transform”——UI 库、埋点 SDK、甚至某些 CSS-in-JS 的自动优化都可能埋雷。每次 fixed 失效，第一反应不该是调样式，而是查 computed 样式树。