fixed在transform非none祖先下退化为relative定位是css规范行为；chrome devtools中逐层检查computed transform值可快速定位问题父级，修复需移出容器或改用sticky。
fixed定位在transform父元素下“变成absolute”，不是bug，是CSS规范强制行为——只要任意祖先的transform计算值不为none（包括translateZ(0)、scale(1)），fixed就会退化为相对于该祖先定位。
怎么快速定位哪个父级在破坏fixed
别靠经验猜，用Chrome DevTools直接查computed值：
- 选中失效的
position: fixed元素，在Elements面板按住Shift连续点击右上角箭头，逐层跳转父节点 - 每到一层，切到Computed面板，搜索
transform，看值是否为none - 重点盯
translateZ(0)、rotate(0)、scale(1)这类“伪变换”——视觉无变化，但已创建新包含块 - 顺手搜
filter、opacity、backdrop-filter、will-change，它们有同等破坏力
真正有效的修复方式只有两种
临时加transform: none !important能验证问题，但不能上线。生产环境必须选以下之一：
- 把fixed元素从transform容器里拎出来，挂到
下：React用createPortal，Vue用Teleport，纯JS用document.body.append(el) - 保持DOM位置不变时，优先换
position: sticky：比如top: 0或bottom: 0，现代浏览器支持良好，且完全不受transform干扰 - 慎用
position: absolute+ JS监听scroll模拟fixed：滚动抖动、软键盘弹出时坐标错乱、性能开销大，只在极特殊场景兜底
最容易被忽略的隐形陷阱
第三方组件库内部悄悄加了transform——Ant Design的Drawer、Element Plus的el-dialog、某些轮播图组件，默认用了transform: translateX()或translateZ(0)，你写的fixed按钮只要嵌套在里面，立刻失效。
真机测试比模拟器关键：缩放 + 横屏 + 软键盘三者叠加时，问题才完全暴露；iOS Safari对overflow-scrolling: touch的处理也属于同一类规范行为，不是bug，但容易漏查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
