这是CSS规范强制行为：只要祖先元素filter计算值不为none（如blur(0)、opacity(.99)等），就会创建新包含块，使fixed退化为相对该祖先定位。
为什么filter会让fixed元素“变成absolute”
这不是bug，是CSS规范强制行为：只要任意祖先元素的filter计算值不为none（哪怕只是filter: blur(0)、filter: opacity(.99)，甚至filter: drop-shadow(0 0 0 #000)），浏览器就必须创建新的**包含块（containing block）** 和**层叠上下文（stacking context）**。此时position: fixed立即退化为相对于该父容器定位——视觉上就像被“框住”，随页面滚动偏移，top/left也以父容器左上角为基准。
哪些filter写法看似无害实则致命
别只盯着blur()或grayscale()，以下写法同样触发失效：
-
filter: blur(0)—— 没视觉变化，但已创建新包含块 -
filter: opacity(.99)—— 注意：opacity本身是独立属性，但作为filter函数使用时合法且危险 -
filter: drop-shadow(0 0 0 #000)—— 阴影偏移为0，仍算非none -
filter: url(#svg-filter)—— 即使SVG滤镜为空，也生效 -
backdrop-filter: blur(1px)—— 同样触发，且更隐蔽（不依赖父元素是否设position）
如何快速定位并验证问题源头
用Chrome DevTools直接查computed值，不是看声明，而是看最终计算结果：
- 选中失效的
fixed元素，在Elements面板按住Shift + ↑逐层跳转父节点 - 每到一层，切到Computed面板，搜索
filter，看值是否为none - 顺手搜
backdrop-filter、transform、opacity（will-change——它们有同等破坏力 - 临时加
filter: none !important到可疑父级，若fixed恢复即确认
真正有效的修复方式有哪些
硬调z-index或加!important没用，关键在结构与作用域隔离：
立即学习“前端免费学习笔记（深入）”；
- 把滤镜抽离到伪元素上：
.glass::before设backdrop-filter，主容器保持filter: none - 确保伪元素父容器有
position: relative，否则top/left无法准确定位 - 需要
fixed的子元素（如关闭按钮）必须显式声明position: fixed，并确认其DOM祖先链中无其他filter或transform - 无法改结构时，用
createPortal（React）、Teleport（Vue）或document.body.append(el)（原生）挂到<body>下——这是最稳的兜底
最容易被忽略的是全局滤镜：比如body { filter: grayscale(1); }会静默劫持所有fixed元素的定位基准，连html标签都逃不掉；iOS Safari对backdrop-filter的处理尤其敏感，真机测试不可跳过。
