fixed定位“粘”在父容器是CSS规范行为：祖先元素transform计算值非none会创建新包含块，使fixed退化为relative定位；需用DevTools检查各层transform实际值，首选DOM移出或Teleport解决。
fixed定位突然“粘”在父容器里，是transform惹的祸
不是bug，是CSS规范强制行为：只要任意祖先元素的transform计算值不为none（哪怕只是transform: translateZ(0)），它就会创建新的包含块（containing block），导致position: fixed退化为相对于该祖先定位——效果等同于position: absolute。
常见“伪安全”写法全都会触发：
transform: scale(1)transform: rotate(0)transform: matrix(1, 0, 0, 1, 0, 0)transform: translateX(0)-
will-change: transform（虽不直接触发，但常与transform共存，误导排查）
真正安全的只有：transform: none、transform: unset（且未被继承污染）。
为什么DevTools里明明没写transform，fixed还是失效？
你没写 ≠ 它没加。第三方组件库（如Ant Design的Drawer、Element Plus的el-dialog、Swiper轮播）常默认注入transform: translateZ(0)或will-change: transform来“开启硬件加速”，结果静默劫持了你的fixed元素。
立即学习“前端免费学习笔记（深入）”；
移动端还有额外陷阱：
- iOS Safari中
overflow-scrolling: touch会被等效识别为transform触发条件 - 全局缩放方案（如用JS动态设置
#scale-box的transform: scale()）会污染整棵子树
别信“我没写就安全”——必须打开Chrome DevTools → Elements → 选中fixed元素 → 按住Shift连续点右上角箭头逐层上跳 → 切到Computed标签页，搜transform，看每一层的**实际计算值**是不是none。
绕过transform影响的实操路径
临时加transform: none !important只能验证问题，不能当修复方案——它可能破坏动画逻辑、滚动性能，甚至让第三方组件失灵。
真正有效的解法分三层：
-
首选：把
fixed元素DOM节点移出transform父级，挂到document.body下。React用createPortal，Vue用Teleport，纯HTML手动挪位置 -
次选：改用
position: sticky（如top: 0），它不受transform影响，但需确保父容器有明确滚动上下文（overflow-y: auto且高度受限） -
兜底：仅当DOM结构完全锁死时，才用
position: absolute+getBoundingClientRect()监听scroll和resize动态更新top/left——注意节流，且软键盘弹出时坐标易错乱
真机测试比DevTools更关键
模拟器看不出的问题，在真机上一触即发：
- iOS Safari中，软键盘弹出会临时解除
fixed锚定，导航栏“掉下来” - 横竖屏切换 + 页面缩放 + 键盘唤起三者叠加时，
fixed坐标系最容易崩坏 - 某些安卓WebView对
translate3d(0, 0, 0)过度图层创建，内存飙升反而卡顿
别只盯着样式表，先用Computed面板确认每一层的真实渲染状态；DOM结构调整比CSS hack更可靠；移动端优先考虑sticky或Teleport，而不是硬刚fixed。
