这是CSS规范强制行为而非bug：父元素transform非none（如translateZ(0)）会创建新包含块，使fixed退化为相对该父级定位，视觉等同absolute；filter、opacity
为什么transform会让fixed子元素“变成absolute”
这是CSS规范强制行为，不是浏览器bug。只要父元素的transform计算值不为none（比如translateZ(0)、scale(1)、rotate(0deg)），它就会创建一个新的包含块（containing block）。而position: fixed的定义是“相对于初始包含块（通常是视口）定位”，一旦路径上出现新包含块，浏览器就必须把fixed的定位参考系切换成那个父元素——视觉效果完全等同于position: absolute。
常见错觉是“我没动它，只是加了硬件加速”，但translateZ(0)已足够触发该机制；IE11不执行此规则，反而容易掩盖问题。
哪些属性有同等破坏力
除了transform，以下任意一个在祖先链上生效，都会让fixed退化：
-
filter（哪怕只是blur(0)或opacity(0.99)） -
opacity小于1（注意：opacity: 1安全，opacity: .999就不安全） backdrop-filter-
will-change: transform或will-change: filter - iOS Safari中
overflow-scrolling: touch（虽已废弃，但旧项目仍存在）
这些属性都会创建新的层叠上下文和包含块，影响范围是继承式的：只要某一层父级触发，其所有后代fixed元素全受影响，无论嵌套多深。
立即学习“前端免费学习笔记（深入）”；
怎么快速定位“搞鬼”的祖先节点
别靠猜，用Chrome DevTools直接查Computed值：
- 选中失效的
fixed元素，在Elements面板按住Shift连续点击右上角箭头，逐层跳转父节点 - 每到一层，切到Computed面板，搜索
transform，看是否为none - 同时顺手搜
filter、opacity、backdrop-filter、will-change - iOS Safari开发者工具会直接标出「Fixed position containing block」，一眼可见
特别注意第三方组件：Ant Design的Drawer、Element Plus的el-dialog、轮播图组件，内部常默认带transform: translateX(0)，你没写，但它写了。
真正能上线的修复方式只有两种
transform: none !important只能验证问题，不能当解法——它可能破坏动画、滚动性能或第三方组件逻辑。
必须选其一：
- 把
fixed元素从transform容器中移出，挂到document.body下：React用createPortal，Vue用Teleport，纯JS用document.body.append(el) - 保持DOM位置不变时，优先换
position: sticky（如top: 0或bottom: 0），它完全不受transform干扰，现代浏览器支持良好
最麻烦的不是找不到问题，而是问题藏在别人写的代码里——比如微前端主应用加了transform，子应用的fixed按钮就跟着失效；真机测试比模拟器关键，缩放+键盘弹出+横竖屏三者叠加时，问题才完全暴露。
