css设置transform和filter对fixed定位的影响
在使用使用filter
属性添加整站置灰功能时发现了一个问题,由于想针对全部页面的所有元素实现这个效果,于是针对html
和body
都添加了filter属性,添加之后是实现了置灰的效果,但是发现右侧悬浮导航以及部分使用固定定位(fixed)的弹窗失效了。
原因:当在 body
中使用了filter
滤镜属性的时候,会导致fixed
元素定位发生错误,即不再相对viewport进行定位,而是相对整个网页 body元素)进行定位。
当filter
不为none的时候,如果该元素或者其子元素具有absolute
或fixed
属性,那么它会为其创建一个新的包含块/容器,会造成该 absolute或 fixed元素的定位发生变化(就是改变了absolute
或 fixed
元素的定位<父>元素,变成新创建的元素)。如果 filter 作用在根元素(即 html 标签)时,它是不会为 absolute 或 ixed 子元素创建新的包含块的。
如何解决:
只需要将filter
属性放在 html
标签上就好了
本文由:小天丶 发布于 小菜的IT网,转载请注明出处:https://www.xiaocaiit.cn/513.html
评论此文章
已有0人参与了评论