backdrop-filter非none会强制fixed元素包含块变为父级而非视口，导致其降级为relative行为；修复方式包括将backdrop-filter移至html、用Portal提升层级或手动调整DOM位置。
backdrop-filter 会让 fixed 元素的包含块从视口变成父级，不是兼容性问题，是规范强制行为：只要计算值非 none，就创建新包含块，fixed 自动降级为 relative 行为。
backdrop-filter 非 none 就会劫持 fixed 的包含块
哪怕写的是 backdrop-filter: blur(0) 或 backdrop-filter: none（注意某些 iOS Safari 版本会错误解析 none 为非空），只要浏览器计算后不等于初始值 none，就会触发新包含块。这不是“毛玻璃没生效”，而是 fixed 元素的定位基准已从 viewport 变成那个带 backdrop-filter 的祖先节点——视觉上它就跟着父容器滚动或偏移了。
常见误判点：
-
backdrop-filter: blur(0)≠ 没效果，它仍满足“非 none”条件 - 父级设了
backdrop-filter，子级 fixed 元素即使没写任何滤镜也会被影响 - iOS Safari 对该属性尤其敏感，连
backdrop-filter: inherit都可能触发
Chrome DevTools 里怎么快速确认是 backdrop-filter 搞的鬼
打开 Elements 面板 → 选中失效的 fixed 元素 → 切到 Computed 标签页 → 点右上角连续箭头逐层向上跳转，每层都检查：
立即学习“前端免费学习笔记（深入）”；
-
backdrop-filter是否为none -
filter、transform、opacity、will-change这些同效属性是否也为none - 重点看 “Containing Block” 字段：如果显示的是某个
div而非Viewport，就锁定了源头
修复时别在父级上“微调”，要改作用域或结构
把 backdrop-filter 移到 html 上是最轻量解法，因为规范明确允许根元素应用该属性而不破坏后代 fixed 的视口锚定：
- 错：
body { backdrop-filter: blur(8px); }→ 所有 fixed 子元素全被劫持 - 对：
html { backdrop-filter: blur(8px); }→ 视觉不变，fixed 仍钉在视口 - 但注意：
html若本身有transform或filter，它自己就成了新包含块，此时移过去也无效
若 DOM 不可控（比如第三方弹窗组件内部加了 backdrop-filter），就得提结构层级：
- React：用
createPortal渲染到document.body - Vue：在
mounted中执行document.body.append(this.$el) - 纯 HTML：手动把
<div class="fixed-thing"> 移到 <code>底部 - 同时必须显式设高
z-index（如z-index: 2147483647），并避免依赖原路径的选择器
真正难处理的是多层合成上下文叠加场景
当一个 fixed 元素同时处于 backdrop-filter 父容器 + transform 祖父容器 + 微前端主应用的 opacity: 0.99 根节点下，定位基准不再由“有没有 backdrop-filter”决定，而是由“谁最先创建了包含块”决定——这取决于样式计算顺序和层叠上下文生成优先级，DevTools 里 Containing Block 字段只显示最终结果，不会告诉你中间哪一层“赢了”。这时候靠删属性已不够，得结合 getComputedStyle() 逐层读取真实计算值，再比对规范定义的包含块创建优先级表。
