4月4日 黑白屏 fliter 使 position 定位失效

问题：
2020年4月4日全国半旗致哀，网站要改为黑白主题色，通过使用css filter 属性为所有元素加上黑白色滤镜，然后遇到了决定定位，固定定位失效混乱的问题。
定位：
通过阅读 w3c 对 filter 的描述：

w3c

了解到对于设置 filter 不为 none 的绝对定位和固定定位的元素，会为这些元素创建一个容器盒子，然后这些元素的定位将以这个新创建的容器盒子为基准进行定位。所以最好将 fliter 添加根元素也就是 html 元素。
解决：

解决方案