fixed元素在transform等属性的祖先内会降级为相对该祖先定位，这是CSS规范行为；修复核心是将其移出干扰包含块，如用Portal挂载到body。
fixed 元素一旦嵌套在任意设置了 transform（非 none）、filter、opacity（小于 1）、will-change 等属性的祖先内，就会降级为 relative to 那个祖先 —— 这不是 bug，是 CSS 规范强制行为。修复核心只有一条：让 fixed 元素脱离该包含块。
为什么 fixed 会突然变成 absolute？
浏览器计算 position: fixed 的定位基准时，会向上查找“最近的包含块”。只要遇到一个 computed transform 不为 none 的祖先（哪怕只是 transform: translateZ(0) 或 transform: scale(1)），它就立刻成为新的包含块，fixed 失效。
常见诱因包括：
- UI 库组件（如 Ant Design
Drawer、Element Plusel-dialog）内部默认加了transform: translateX()或translateZ(0)做动画/硬件加速 - 某些埋点 SDK 或 A/B 测试脚本悄悄给
或加了transform - 移动端 Safari 对
overflow-scrolling: touch同样敏感——它也会触发包含块创建
用 createPortal 或手动挂载到 body 是最稳解法
不改样式、不碰逻辑，直接把 DOM 节点移出干扰范围。React 中用 createPortal，Vue 中在 mounted + $nextTick 后 append 到 document.body。
关键注意点：
- 确保样式选择器不依赖原 DOM 结构，比如别写
.modal .close-btn，改用独立 class 如.fixed-close-btn - 显式设置高
z-index（如z-index: 2147483647），避免被其他body子元素遮挡 - 如果组件有事件监听或 ref 绑定，移出后需确认生命周期是否完整（尤其 Vue 的
beforeUnmount阶段要手动清理）
排查时别只看自己写的 transform
打开 Chrome DevTools → Elements → 选中你的 fixed 元素 → 右键 “Scroll into view” → 往上逐层点开 computed 样式，搜索 transform 和 filter。
特别盯紧这些“隐身”值：
-
transform: translateZ(0)（最常见，只为 GPU 加速） -
transform: scale(1)、rotate(0)、skew(0) -
filter: blur(0)、opacity(0.99)（哪怕视觉无变化，只要不为none就生效） -
will-change: transform（等效于已应用 transform）
替代方案里，will-change 比 transform 更安全
如果你加 transform 只是为了触发硬件加速（比如防闪烁、提动画性能），优先换成：
will-change: opacity;
或更精准地：
will-change: transform;
但注意：will-change: transform 在某些旧版浏览器中仍会创建包含块；而 will-change: opacity 不会破坏 fixed 定位，且多数场景下加速效果足够。
真正需要 transform 动画时，建议把动效 wrapper 和内容区域拆开：动效只作用在纯容器层，内容子树保持“干净”，避免污染定位上下文。
最易被忽略的一点：iOS Safari 下，哪怕你没写 transform，只要某个滚动区域用了 -webkit-overflow-scrolling: touch，fixed 就会降级。这个限制无法绕过，只能换用 scroll-behavior: smooth 或第三方滚动库模拟原生手感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
