唯一稳定解法是将fixed元素移出transform父级挂到body下，因transform非none会强制创建新包含块使fixed退化为相对祖先定位，同效属性还包括filter、opacity<1、backdrop-filter等。
直接把 position: fixed 元素从带 transform 的父级里移出来，挂到 document.body 下——这是唯一稳定、可预测、不引入新 bug 的解法。
为什么 transform 会让 fixed “飘走”
这不是浏览器 bug，是 CSS 规范强制行为：只要任意祖先的 transform 计算值不是 none（比如 translateZ(0)、scale(1)、rotate(0)），它就创建新的包含块（containing block），导致子元素的 position: fixed 自动退化为相对于该祖先定位，效果等同于 position: absolute。
同效属性还包括：filter（哪怕 blur(0)）、opacity 小于 1、backdrop-filter、will-change: transform，以及 iOS Safari 中的 overflow-scrolling: touch。
怎么快速定位是哪个祖先在“搞破坏”
别靠猜，用 Chrome DevTools 直接查 computed 值：
立即学习“前端免费学习笔记（深入）”；
- 选中失效的
fixed元素 → 按住 Shift 连续点击右上角箭头，逐层跳转父节点 - 每到一层，切到 Computed 面板，搜索
transform、filter、opacity、backdrop-filter - 重点盯
transform: translateZ(0)—— 它没视觉变化，但已生效 - 第三方组件（如 Ant Design 的
Drawer、Element Plus 的el-dialog）内部常默认加transform，你没写，但它写了
React/Vue 中怎么安全移出 DOM
不能只改样式，必须动结构。常见方式：
- React：用
createPortal渲染到document.body，确保 class 名不依赖原层级（比如别用.modal .btn，改用.global-fixed-btn） - Vue：在
mounted中调用this.$nextTick(() => document.body.append(this.$el))；或用<Teleport to="body"> - 手动挂载后，显式加高
z-index（如z-index: 2147483647），避免被其他body子元素遮挡 - 注意事件绑定和 ref 生命周期：Vue 中需在
beforeUnmount手动清理document.body中的节点
替代方案里 sticky 是最省心的选择
如果只是需要“顶部常驻”或“底部悬浮”，position: sticky 几乎无副作用：
-
top: 0或bottom: 0即可，完全不受transform、filter等影响 - 现代浏览器支持良好（Chrome 56+、Firefox 59+、Safari 15.4+、iOS Safari 15.4+）
- 不改变 DOM 结构，无需 portal/teleport，也不用担心 z-index 冲突
- 慎用于需要精确坐标（如
right: 20px; bottom: 20px）的场景——sticky只支持top/bottom/left/right单向锚定
真正麻烦的从来不是怎么修，而是问题藏在别人写的代码里：微前端主应用加了 transform，子应用的 fixed 按钮就跟着失效；埋点 SDK 给 body 加了 opacity: 0.99，全站 fixed 都降级——这些都得真机测试时才暴露，缩放 + 键盘弹出 + 横竖屏三者叠加，才是最终考场。
