设置 backdrop-filter 导致 子元素 position: fixed 不再相对于浏览器视口定位

根据CSS规范，`filter`和`backdrop-filter`属性会创建一个新的包含块（containing block），与`transform`和`perspective`属性的行为类似。这意味着，如果一个元素的父元素有`filter`或`backdrop-filter`属性，那么使用`position: fixed;`的元素将会相对于这个父元素定位，而不是相对于视口。

当在父元素上使用`backdrop-filter: blur(10px);`时，这个父元素成为了新的包含块。因此，任何使用`position: fixed;`的子元素都会相对于这个父元素定位，而不是相对于视口。当你移除`backdrop-filter`属性后，父元素不再是包含块，所以`position: fixed;`的元素又开始相对于视口定位了。

如果你、需要同时使用`backdrop-filter`和`position: fixed;`，需要调整结构，比如移除父容器的 backdrop-filter，单独用一个 元素设置 backdrop-filter 并通过绝对定位填满容器实现一样的效果。

mdn里也写了：“fixed 属性会创建新的层叠上下文。当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。”

https://zhuanlan.zhihu.com/p/647318976

包含块:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing_block