最近由于追悼會(huì)外冀，很多app及網(wǎng)頁(yè)的首頁(yè)都置灰了，產(chǎn)品問我們能不能也快速將小程序首頁(yè)置灰掀泳，我說：好的雪隧，安排！
全局主題置灰主要是用到一行css代碼：
filter: grayscale(1);
可在首頁(yè)父元素上設(shè)置员舵，ok脑沿，這樣是不是就大功告成了？一測(cè)試马僻，發(fā)現(xiàn)有以下問題：
1庄拇、 配置了 css filter 屬性的元素，其子元素的 position:fixed 定位會(huì)失效。
【原因】filter 會(huì)影響 fixed 的定位參照措近。由相對(duì)視口改為相對(duì)設(shè)置了 filter 的祖先溶弟。當(dāng) filter 不為 none 的時(shí)候，如果該元素或者其子元素具有 absolute 或 fixed 屬性瞭郑，那么它會(huì)為其創(chuàng)建一個(gè)新的包含塊/容器辜御，所以會(huì)相對(duì)于新容器定位；但如果 filter 作用在根元素（即 html 標(biāo)簽）時(shí)屈张，它是不會(huì)為 absolute 或 fixed 子元素創(chuàng)建新的包含塊的我抠。
image.png
【解決方案】
web端： 將 filter 設(shè)置在 html 上即可。
html { filter: grayscale(1);}
小程序：需逐個(gè)元素排查袜茧，確保設(shè)置了 filter 的元素，不包含存在 fixed 定位的子元素瓣窄。
2笛厦、配置了 css filter 屬性的元素，z-index會(huì)被提升俺夕，可能會(huì)覆蓋掉其他有定位元素
【解決方案】
注意調(diào)整 z-index 層級(jí)裳凸。
