问题描述
当在 body
中使用了 filter
滤镜属性的时候,会导致 fixed
元素定位发生错误,即不再相对 viewport
进行定位,而是相对整个网页( body
元素)进行定位。
<html> <head> <title>css filter issue</title> <style> body { height: 600px; background: red; filter: grayscale(1); /* 关键代码 */ } .fixed { color: yellow; position: fixed; top: 0; right: 0; } </style> </head> <body> <div class="fixed">fixed item</div> </body> </html>
效果图如下:注意右上角的 fixed item
元素已经不再相对屏幕视图右上角定位了。
解决方案
产生这个问题的原因就是:当 filter
不为 none
的时候,如果该元素或者其子元素具有 absolute
或 fixed
属性,那么它会为其创建一个新的包含块/容器,会造成该 absolute
或 fixed
元素的定位发生变化(就是改变了 absolute
或 fixed
元素的定位<父>元素,变成新创建的元素)。
以上面的例子说明,当在 body
标签中使用了 filter
属性后, filter
就会生成一个新的包含块,其位置大小和 body
一样,然后 fixed
元素就会根据这个包含块进行定位,所以我们会看到 fixed
元素失去原有的特性;
但是,如果 filter 作用在根元素(即 html 标签)时,它是不会为 absolute 或 fixed 子元素创建新的包含块的。
参考: https://drafts.fxtf.org/filter-effects/#FilterProperty
所以解决方案也就很简单了,只需要将 filter
属性放在 html
标签上就好了
html { filter: grayscale(1); }
扩展
1. position: fixed
当一个元素包含 fixed
属性时,屏幕视口( viewport
)会为其创建一个包含块( containing block
),其大小就是 viewport
的大小,然后该 fixed
元素基于该包含块进行定位。所以通常我们会说 fixed
元素是相对 viewport
来定位的。
此外, fixed
属性会创建新的层叠上下文。当元素祖先的 transform
, perspective
或 filter
属性非 none
时,容器由视口改为该祖先。
参考: https://www.w3.org/TR/css-position-3/#fixed-pos
2. HTML
标签和 body
标签
两者之间的区别可以参考这边博客: http://phrogz.net/css/htmlvsbody.html
ps:HTML 元素是 max(屏幕高度<viewport高度>, 内部元素高度<body元素高度>)
到此这篇关于详解filter与fixed冲突的原因及解决方案的文章就介绍到这了,更多相关filter与fixed冲突内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能。测试了很久,终...
本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义,mask 译为遮罩。在 C...
前言 2021 年中国共产党将迎来建党 100 周年。百年来中国社会发生了沧桑巨变。从...
web前端开发中避免不了要在页面上显示很多文章,如何才能从文中,文末点击快捷的...
根据百度地图官方解释,在移动端 H5 页面中可监听下面这 4 个事件: touchstart, ...
对于网页制作者来说,最烦琐的事情可能就是给页面中的图片或文字加链接了。假如...
考虑以下两段代码: 复制代码 代码如下: urlset url lochttp://www.caixw.com/ar...
链入式是把所有的 样式 放在一个或多个 外部样式表文件 中,这个文件是以 css 为...
工欲善其事,必先利其器! 就在不久之前,Java领域的开发神器 IntelliJ IDEA 终...
写给初用Nestj做项目的你(第二篇: 配置gitlab-runner操作gitlab) 如果不想自己搭...