position:fixed 和 backdrop-filter 定位问题
前言
这个博客开发过程中，为了让 navbar(顶部导航栏)看起来更好看，所以 添加了 backdrop-filter:blur(10px); 属性,结果就发现了移动端的 navbar 侧边栏发生了问题。
原因
导致这个原因是 backdrop-filter 会影响子元素的定位上下文。
在 docusaurus 移动端中 顶部导航栏(.navbar) 里面还两个子元素一个是黑色遮罩(.navbar-sidebar__backdrop)，一个是侧边展开栏(.navbar-sidebar)，这两个元素是 navbar 的子元素，采用了 position: fixed，在父元素(.navbar)使用了 backdrop-filter 后，这两个子元素不再根据视口定位了，而是根据父元素(.navbar)进行定位，这就导致移动端导航栏的侧边栏显示不出来了
原理
display:flex 的元素的定位 会被先祖元素的 transform，filter，perspective等 影响。
解决方案
使用伪元素(推荐)
backdrop-filter 不直接放在父元素上，而是放在 父元素的伪类 after 上，通过添加 z-index:-1 来保证页面显示没有问题
调整页面层级
侧边栏层级和顶部导航 栏同级就可以