filter对fixed的影响及解决方法

问题现象

        我们使用css position: fixed 的时候发现，fixed他竟然不跟随屏幕的进行定位，而是受到含有filter盒子的影响

问题原因

        当在元素中使用了filter滤镜属性的时候，会导致内部 fixed 元素定位发生错误，即不再相对 viewport 进行定位，而是相对整个filter属性的容器元素进行定位。

解决方案

产生这个问题的原因就是：当 filter 不为 none 的时候，如果该元素或者其子元素具有 absolute 或 fixed 属性，那么它会为其创建一个新的包含块/容器，会造成该 absolute 或 fixed 元素的定位发生变化（就是改变了 absolute 或 fixed 元素的定位<父>元素，变成新创建的元素）。

但是，如果 filter 作用在根元素（即 html 标签）时，它是不会为 absolute 或 fixed 子元素创建新的包含块的。

所以如果要使用滤镜的话，直接针对html标签设置就好

html {
	filter: grayscale(1);
}