css设置transform和filter对fixed定位的影响

在使用使用filter属性添加整站置灰功能时发现了一个问题，由于想针对全部页面的所有元素实现这个效果，于是针对html和body都添加了filter属性，添加之后是实现了置灰的效果，但是发现右侧悬浮导航以及部分使用固定定位（fixed）的弹窗失效了。

如何将网站设置为灰色（黑白色）

  发布于：1年前 (2022-12-01)

原因：当在 body中使用了filter滤镜属性的时候，会导致fixed元素定位发生错误，即不再相对viewport进行定位，而是相对整个网页 body元素）进行定位。

当filter不为none的时候，如果该元素或者其子元素具有absolute或fixed属性，那么它会为其创建一个新的包含块/容器，会造成该 absolute或 fixed元素的定位发生变化（就是改变了absolute或 fixed元素的定位<父>元素，变成新创建的元素）。如果 filter 作用在根元素（即 html 标签）时，它是不会为 absolute 或 ixed 子元素创建新的包含块的。

如何解决：

只需要将filter属性放在 html 标签上就好了