css filter属性和position冲突

今天尝试一下做一个网站首页变灰的效果，本来一行代码就能解决的问题，却因为某种原因陷入了误区，记录一下
 

网页变灰代码

html {
    filter: grayscale(1);
}

对，没错，就一行代码。

，，，
，，，
，，，

冲突问题

当body元素及其子元素添加filter属性之后，position的fiexd，absolute 和sticky属性会失效！

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

解决方案就是直接在html中写filter属性