transform会让fixed元素“飘走”是CSS规范强制行为：只要任意祖先设置了非none的transform，就会创建新包含块，使fixed退化为relative定位。
为什么transform会让fixed元素“飘走”
不是浏览器bug，是CSS规范强制行为：只要任意祖先元素设置了非none的transform（比如translateZ(0)、scale(1)、rotate(0)），就会创建新的包含块（containing block），导致position: fixed退化为相对于该祖先定位——效果等同于position: absolute。
常见现象包括：导航栏随页面滚动、回到顶部按钮卡在轮播图容器里、遮罩层只盖住局部区域。尤其容易被忽略的是第三方组件（如Ant Design的Drawer、Element Plus的Dialog）内部默认加了transform: translateX(0)，你没写，但它写了。
怎么快速定位是哪个祖先在“搞鬼”
别靠猜，用Chrome DevTools逐层检查Computed值：
- 选中失效的
fixed元素 → 按住Shift连续点击右上角箭头，逐层跳转父节点 - 每到一层，切到
Computed面板，搜索transform，看是否为none - 顺手查
filter（哪怕blur(0)）、will-change（如will-change: transform）、opacity（小于1）、backdrop-filter - iOS Safari开发者工具会直接标出「Fixed position containing block」，一眼可见
真正有效的修复方式不是加transform: none
transform: none !important能验证问题，但不能当修复方案——它可能破坏动画逻辑、滚动性能或第三方组件行为。
立即学习“前端免费学习笔记（深入）”；
必须动DOM结构或改用替代方案：
- 把
fixed元素移出带transform的容器，挂到document.body下（React用createPortal，Vue用Teleport或mounted中document.body.appendChild(el)） - 确保样式选择器不依赖原DOM层级，比如改用
.global-fixed-btn而非.modal .fixed-btn - 显式设置高
z-index（如z-index: 2147483647），避免被其他body子元素遮挡 - 若必须保留在局部DOM中，优先用
position: sticky替代：top: 0或bottom: 0，它不受transform影响，且现代浏览器支持良好
移动端和框架里的隐性陷阱
iOS Safari对fixed更敏感，以下情况会静默触发失效：
-
overflow-scrolling: touch（等效于transform） - 全局缩放方案（如JS动态设置
#scale-box的transform: scale()） - 某些UI库的
getPopupContainer或append-to-body配置未开启，导致弹窗wrapper自带transform - 真机测试比模拟器关键：缩放 + 键盘弹出 + 横竖屏三者叠加时，
fixed最容易暴露问题
最麻烦的不是找不到问题，而是问题藏在别人写的代码里——比如微前端主应用加了transform，子应用的fixed按钮就跟着失效。这时候协商层级或统一用body级插入，比硬调样式更可靠。
