transform非none会强制创建新包含块，使fixed定位从视口降级为该祖先；filter、opacity
transform 非 none 会强制创建新包含块
只要任意祖先元素的 transform 计算值不是 none，浏览器就必须为它创建一个新的包含块（containing block），而 position: fixed 的定位基准就会从视口降级为这个新块——这是 CSS 规范白纸黑字写明的行为，不是 bug，也不是浏览器差异。
常见“看似无害”的触发值包括：transform: translateZ(0)、transform: scale(1)、transform: rotate(0deg)、transform: perspective(1px)。哪怕视觉上毫无变化，只要计算值不为 none，就已生效。
哪些非 transform 属性有同等破坏力
filter、opacity、backdrop-filter、will-change、甚至 iOS Safari 的 overflow-scrolling: touch，都会触发相同机制：创建新包含块或新层叠上下文，使 fixed 元素锚定父级而非视口。
-
filter: blur(0)或filter: opacity(1)（语法错误也可能被解析为非none） -
opacity: 0.99就足够触发，不必小于 0.5 -
backdrop-filter: none在部分 iOS Safari 版本中仍会误触发 -
will-change: transform单独写不会，但若和transform同时存在，实际生效的是后者
为什么 DevTools 里看不出问题
问题常藏在框架组件内部或全局样式里，你没写 transform，但它写了。比如 Ant Design 的 Drawer、Element Plus 的 el-dialog、轮播图组件，常默认加 transform: translateX()；uni-app 的 uni-page 也会自动注入 transform。
排查不能靠猜 DOM 结构，要用 Chrome DevTools 实操：
- 选中失效的
fixed元素，在 Elements 面板按住 Shift 连续点击右上角箭头，逐层跳转父节点 - 每到一层，切到 Computed 标签页，搜索
transform、filter、opacity、backdrop-filter - 重点盯
translateZ(0)和第三方组件悄悄加的transform值
修复不能只靠 transform: none !important
这个写法能快速验证问题，但上线后会破坏动画性能、图层合成或滚动流畅度，属于伪解法。
真正可靠的路径只有三条：
- 用
createPortal（React）或fixed元素挂到下，彻底脱离干扰链 - 优先改用
position: sticky（如top: 0），它完全不受transform影响，现代浏览器支持良好 - 极少数必须保留在局部 DOM 中的场景，才考虑
position: absolute+ JS 监听scroll/resize，但要注意软键盘弹出时window.innerHeight突变、getBoundingClientRect()读取时机抖动等问题
最容易被忽略的是：真机测试时缩放 + 横屏 + 软键盘三者叠加，问题才完全暴露；模拟器往往不复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
