position: fixed在transform父元素下“失效”是CSS规范强制行为：只要祖先transform计算值不为none（如translateZ(0)、scale(1)），就会创建新包含块，使fixed退化为相对该祖先定位，视觉等同absolute；filter、opacity<1等同效。
position: fixed 元素在 transform 父元素下“失效”，不是 bug，是 CSS 规范强制行为：只要任意祖先元素的 transform 计算值不为 none，它就创建新的包含块（containing block），fixed 必须退化为相对于该祖先定位——视觉上完全等同于 position: absolute。
哪些 transform 值会触发 fixed 降级
哪怕毫无视觉变化，只要计算后不是 none，就足以破坏定位基准：
-
transform: translateZ(0)—— 最常见，“伪硬件加速”写法，DOM 不动但定位已劫持 -
transform: scale(1)、transform: rotate(0deg)、transform: translateX(0) -
transform: matrix(1, 0, 0, 1, 0, 0)这类恒等变换矩阵 -
transform: unset安全（继承链未覆盖时），但transform: none是唯一明确安全的值
为什么 filter / opacity / backdrop-filter 同样危险
这些属性和 transform 一样，会创建新层叠上下文 + 新包含块，影响范围是继承式的：
-
filter: blur(0)、filter: opacity(0.99)—— 只要计算值不为none就触发 -
opacity: 0.99（注意：opacity: 1安全，opacity: .999不安全） -
backdrop-filter: blur(1px)—— iOS Safari 尤其敏感 -
will-change: transform本身不直接创建包含块，但常与transform共存，容易误判根源
怎么快速定位“搞鬼”的祖先节点
别靠猜，用 Chrome DevTools 直接查 computed 值：
- 选中失效的
fixed元素，在 Elements 面板按住 Shift 连续点击右上角箭头，逐层跳转父节点 - 每到一层，切到 Computed 面板，搜索
transform、filter、opacity、backdrop-filter，看是否为none或默认值 - 重点盯
translateZ(0)和第三方组件内部默认加的transform—— 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干扰，现代浏览器支持良好
最容易被忽略的是：问题往往藏在别人写的代码里，比如微前端子应用、埋点 SDK、甚至 <html> 上被脚本注入的 transform；真机测试时缩放 + 横屏 + 软键盘三者叠加，才是暴露问题的临界点。
