如何避免CSS transform破坏fixed定位

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值：

1. 选中失效的fixed元素 → 按住Shift连续点击右上角箭头，逐层跳转父节点
2. 每到一层，切到Computed面板，搜索transform，看是否为none
3. 顺手查filter（哪怕blur(0)）、will-change（如will-change: transform）、opacity（小于1）、backdrop-filter
4. iOS Safari开发者工具会直接标出「Fixed position containing block」，一眼可见

真正有效的修复方式不是加transform: none

transform: none !important能验证问题，但不能当修复方案——它可能破坏动画逻辑、滚动性能或第三方组件行为。

必须动DOM结构或改用替代方案：

1. 把fixed元素移出带transform的容器，挂到document.body下（React用createPortal，Vue用Teleport或mounted中document.body.appendChild(el)）
2. 确保样式选择器不依赖原DOM层级，比如改用.global-fixed-btn而非.modal .fixed-btn
3. 显式设置高z-index（如z-index: 2147483647），避免被其他body子元素遮挡
4. 若必须保留在局部DOM中，优先用position: sticky替代：top: 0或bottom: 0，它不受transform影响，且现代浏览器支持良好

移动端和框架里的隐性陷阱

iOS Safari对fixed更敏感，以下情况会静默触发失效：

1. overflow-scrolling: touch（等效于transform）
2. 全局缩放方案（如JS动态设置#scale-box的transform: scale()）
3. 某些UI库的getPopupContainer或append-to-body配置未开启，导致弹窗wrapper自带transform
4. 真机测试比模拟器关键：缩放 + 键盘弹出 + 横竖屏三者叠加时，fixed最容易暴露问题

最麻烦的不是找不到问题，而是问题藏在别人写的代码里——比如微前端主应用加了transform，子应用的fixed按钮就跟着失效。这时候协商层级或统一用body级插入，比硬调样式更可靠。