filter非none会强制创建新包含块和层叠上下文，使内部fixed元素定位基准变为该容器而非视口，z-index仅在内部生效；解决方法是用伪元素隔离滤镜作用域，并确保容器position:relative、子元素显式定位且z-index合理。
filter 不为 none 时，会强制创建新的包含块（containing block）和层叠上下文（stacking context），导致内部 position: fixed 或 position: absolute 元素的定位基准从视口或文档根节点，变成这个 filter 容器本身——这不是 bug，是 CSS 规范明确要求的行为。
为什么 fixed 元素突然“跟着滚动”了
只要父级（哪怕隔了几层）设置了 filter: blur(1px)、filter: opacity(.99)、filter: drop-shadow(...) 等任何非 none 值，就会触发新包含块。此时 position: fixed 实际退化为相对于该容器定位，视觉上就像“被框住”一样随页面滚动。
- 即使写的是
filter: blur(0)或filter: opacity(1)（注意：后者语法非法，但浏览器可能 fallback 为opacity(1)并仍触发上下文）——只要 computed 值不是none，就生效 -
backdrop-filter同样触发，且影响更隐蔽：它会让fixed相对于它所在的那个元素定位，哪怕该元素没设position - Chrome DevTools 的 Computed 面板里搜
stacking context，标有 “This element establishes a stacking context” 的就是源头
z-index 为什么“突然不顶用了”
filter 创建的层叠上下文是“结界”，子元素的 z-index 只在内部有效，无法与外部同级元素比高低。比如弹窗 z-index: 9999 被隔壁卡片 z-index: 10 盖住，大概率就是卡片父容器开了 filter。
- 别试图靠调高子元素
z-index数字来解决——它出不去这个上下文 -
z-index生效前提是元素已建立层叠上下文，而 filter 容器自身若没设position，它的z-index根本不生效 - 常见误操作：给伪元素加
z-index: -1，但忘了给文字容器加position: relative，结果文字被盖住
怎么安全地保留滤镜又不让定位失效
核心是隔离滤镜作用域，不让它污染结构层级。直接对容器设 filter 是最危险的做法。
立即学习“前端免费学习笔记（深入）”；
- 用
::before或::after伪元素承载滤镜：.glass::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(6px); z-index: -1; } - 确保容器本身设
position: relative，让伪元素能准确定位 - 需要
fixed的子元素（如关闭按钮）必须脱离该容器 DOM 结构，或至少设position: fixed+ 显式z-index（并确认其祖先链无其他 filter） - Vue/React 中可用
<teleport to="body">把弹窗挂到<body>下，彻底绕过父级 filter 影响
真正难处理的不是单个 filter，而是多层框架嵌套下，不同模块各自加 filter 导致的“层叠上下文套娃”。这时候光调样式没用，得协商 DOM 插入点或统一剥离滤镜逻辑——滤镜一旦生效，它就不再是 CSS 层面能微调修复的问题，而是结构设计阶段就得规避的约束。
