backdrop-filter 会强制创建新包含块和层叠上下文，使内部 position: fixed 元素相对于该上下文而非视口定位；解决方法是用伪元素隔离滤镜作用域，并确保子元素 z-index 高于伪元素且建立自身层叠上下文。
backdrop-filter 为什么让 fixed 定位“变 relative”了
因为 backdrop-filter 会强制创建新的包含块（containing block）和新的层叠上下文（stacking context），导致其内部的 position: fixed 元素不再相对于视口定位，而是相对于这个新上下文定位——视觉上就像“被父容器框住”了一样。
这不是 bug，是规范行为：只要元素启用了 backdrop-filter，它就会成为子元素 fixed 的新参考容器。哪怕父元素本身没设 position，这个效果也成立。
- 常见触发场景：模态框（
.modal）加了毛玻璃效果，里面按钮用position: fixed; top: 20px;，结果按钮跟着模态框滚动 - 连带影响：不仅
fixed失效，z-index也会在该上下文内重新计数，外部z-index值再大也压不住它 - 注意：即使父元素只是祖先链上某一层（不直接包裹子元素），只要中间有任意一级用了
backdrop-filter，就可能传导影响
如何保留 backdrop-filter 又不让 fixed 失效
核心思路是“隔离滤镜作用域”，不让它污染整个父容器的定位上下文。最稳妥的做法是把 backdrop-filter 挂到伪元素或独立占位层上，而非容器本体。
- 给容器加
position: relative，再用::before绘制模糊背景层，并设置z-index: -1 - 确保子元素的
z-index高于伪元素（比如设为1或更高），且自身有position: relative或absolute/fixed - 避免在伪元素上写
background或其他遮挡内容的样式，否则会盖住背后真实背景，使backdrop-filter无内容可模糊 - 示例关键片段：
.glass-container { position: relative; }<br>.glass-container::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(6px); z-index: -1; }<br>.glass-container .fixed-btn { position: fixed; top: 1rem; right: 1rem; z-index: 10; }
为什么加了 position: relative 还是压不住 z-index
z-index 生效的前提是元素已建立层叠上下文，而 backdrop-filter 创建的上下文具有“强隔离性”——它会截断外部 z-index 的穿透能力。单纯加 position: relative 不够，必须确认上下文边界是否被意外扩展。
- 检查是否误在父级写了
will-change: opacity或transform：这些属性会叠加创建隔离合成层，进一步封锁z-index层级 - 确认
backdrop-filter所在元素没有同时设overflow: hidden：这会导致裁剪区域与模糊区域不一致，视觉上像层级错乱 - 避免在同一个元素上既写
backdrop-filter又写z-index: auto：显式设z-index: 0或更高值才能激活上下文 - Chrome DevTools 的 Layers 面板里，能看到带
backdrop-filter的元素是否被标为 “Isolated compositing layer”——如果是，说明它已彻底隔离
@supports 检测后 fallback 色值怎么选才不翻车
降级色不是随便填个 rgba(255,255,255,0.1) 就行。模糊生效后，人眼感知的通透感会减弱，所以 fallback 色必须更淡；但太淡又失去层次，尤其在深色背景上容易发青或不可见。
- 浅色背景推荐 fallback：
rgba(255, 255, 255, 0.08)（模态框）、rgba(255, 255, 255, 0.12)（文字卡片） - 深色背景推荐 fallback：
rgba(0, 0, 0, 0.05)～rgba(0, 0, 0, 0.1)，避开hsla()和transparent（旧 WebView 解析不稳定） -
@supports块内必须重写完整样式，不能只加backdrop-filter：否则 fallback 色会被覆盖，导致支持浏览器反而显示过浓背景 - 务必加
-webkit-backdrop-filter前缀：iOS 15、部分安卓 Chrome 89 仍依赖它，漏掉等于放弃半数移动端用户
backdrop-filter，又加了 will-change: opacity，再套一层 transform: scale(0.99)，这时连 DevTools 的 “Rendering” 面板都可能无法直观反映最终层叠顺序。动手前先删掉所有非必要优化属性，逐个加回来验证，比硬调 z-index 数值靠谱得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
