父元素transform非none（如translateZ(0)、scale(1)）会创建新包含块，使子元素position:fixed退化为相对该父元素定位；同效属性还包括filter、opacity
父元素加了 transform（哪怕只是 translateZ(0)）会导致子元素的 position: fixed 失效，这不是 bug，而是 CSS 规范强制行为：它会让该父元素成为新的包含块（containing block），fixed 元素从此锚定于这个父元素，而非视口。
哪些 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安全，但若被继承链覆盖，仍可能计算为非none
除了 transform，还有哪些属性有同样效果
这些属性只要计算值偏离默认，也会创建新包含块，让 fixed 退化：
-
filter: blur(0)、filter: opacity(0.99) -
opacity: 0.99（注意不是filter语法，是独立属性） -
backdrop-filter: none（iOS Safari 尤其敏感） -
perspective: 1000px或任何非none值 -
overflow-scrolling: touch（仅 iOS Safari，常被忽略）
will-change: transform 本身不直接触发，但常与 transform 共存，容易误判根源。
立即学习“前端免费学习笔记（深入）”；
怎么快速定位是哪个父级在“搞破坏”
别靠猜 DOM 结构，用 Chrome DevTools 直接查最终计算值：
- 选中失效的
fixed元素 → 在 Elements 面板按住 Shift 并连续点击右上角箭头，逐层向上跳转父节点 - 每到一层，切到 Computed 标签页，搜索
transform、filter、opacity、backdrop-filter - 重点盯
transform: translateZ(0)—— 它不改变布局，但已悄悄重置定位上下文 - 第三方组件库（如 Ant Design 的
Drawer、Element Plus 的el-dialog）内部常默认加transform，你没写，但它写了
真正能上线的修复方式只有两种
临时加 transform: none !important 只能验证问题，不能用于生产环境：
- 把
fixed元素从带transform的容器里拎出来，挂到下：
React 用createPortal，Vue 用<teleport to="body"></teleport>，纯 JS 用document.body.append(el) - 保持 DOM 位置不变时，优先换
position: sticky：比如top: 0或bottom: 0，现代浏览器支持良好，且完全不受transform干扰
最常被忽略的是真机场景：缩放 + 横屏 + 软键盘三者叠加时，fixed 锚定偏移才会彻底暴露；此时仅靠 DevTools 模拟器排查，大概率漏掉关键路径。
