是强制性规范行为：只要任意祖先元素transform计算值不为none（如translateZ(0)、scale(1)），fixed即退化为相对该祖先定位，等效absolute；filter、opacity<1、backdrop-filter等同效。
会，而且是强制性的——只要任意祖先元素的 transform 计算值不为 none，position: fixed 就会退化为相对于该祖先定位，视觉效果等同于 position: absolute。这不是浏览器 bug，而是 W3C 规范明确要求的行为。
哪些 transform 值会触发 fixed 降级
哪怕完全不改变元素位置或形态，只要计算后不是 none，就足以破坏 fixed 锚定视口的能力：
-
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是明确安全的值
除了 transform，还有哪些属性有同等效果
这些属性只要计算值偏离默认值，同样会创建新包含块，让 fixed 失效：
-
filter：哪怕filter: blur(0)或filter: opacity(0.99) -
opacity小于 1：例如opacity: 0.99（注意这不是 filter 语法） -
backdrop-filter：iOS Safari 尤其敏感 -
perspective：任何非none值 -
will-change: transform：本身不直接触发，但常与transform共存，容易误判根源
排查时不能只盯 transform，必须用 Chrome DevTools 的 Computed 面板逐层检查这些属性的最终计算值。
立即学习“前端免费学习笔记（深入）”；
怎么快速定位是哪个祖先在“搞破坏”
别靠猜，用 Chrome DevTools 直接查 computed 值：
- 选中失效的
fixed元素，在 Elements 面板按住 Shift 连续点击右上角箭头，逐层向上跳转父节点 - 每到一层，切到 Computed 标签页，搜索
transform、filter、opacity、backdrop-filter，看值是不是none或默认值 - 重点盯
transform: translateZ(0)这种写法——它不改变布局，但彻底改写定位基准 - 第三方组件库（如 Ant Design 的
Drawer、Element Plus 的el-dialog）内部常默认加transform，你写的fixed按钮只要嵌套在里面，立刻失效
真正有效的修复方式只有两种
临时加 transform: none !important 能验证问题，但不能上线。生产环境必须选下面之一：
- 把
fixed元素移出带transform的容器，挂到document.body下：React用createPortal，Vue用Teleport或mounted中document.body.appendChild(el) - 确保样式选择器不依赖原 DOM 层级，比如改用
.global-fixed-btn而非.modal .fixed-btn - 显式设置高
z-index（如z-index: 2147483647），避免被其他body子元素遮挡 - 若必须保留在局部 DOM 中，优先用
position: sticky替代：top: 0或bottom: 0，它不受transform影响，且现代浏览器支持良好
最麻烦的不是找不到问题，而是问题藏在别人写的代码里——比如微前端主应用加了 transform，子应用的 fixed 按钮就跟着失效。真机测试比模拟器关键，缩放 + 键盘弹出 + 横竖屏三者叠加时，fixed 最容易暴露问题。
