最近由于追悼会，很多app及网页的首页都置灰了，产品问我们能不能也快速将小程序首页置灰，我说：好的，安排！
全局主题置灰主要是用到一行css代码：
filter: grayscale(1);
可在首页父元素上设置，ok，这样是不是就大功告成了？一测试，发现有以下问题：
1、 配置了 css filter 属性的元素，其子元素的 position:fixed 定位会失效。
【原因】filter 会影响 fixed 的定位参照。由相对视口改为相对设置了 filter 的祖先。当 filter 不为 none 的时候，如果该元素或者其子元素具有 absolute 或 fixed 属性，那么它会为其创建一个新的包含块/容器，所以会相对于新容器定位；但如果 filter 作用在根元素（即 html 标签）时，它是不会为 absolute 或 fixed 子元素创建新的包含块的。
image.png
【解决方案】
web端： 将 filter 设置在 html 上即可。
html { filter: grayscale(1);}
小程序：需逐个元素排查，确保设置了 filter 的元素，不包含存在 fixed 定位的子元素。
2、配置了 css filter 属性的元素，z-index会被提升，可能会覆盖掉其他有定位元素
【解决方案】
注意调整 z-index 层级。
