加入收藏 | 设为首页 | 会员中心 | 我要投稿 拼字网 - 核心网 (https://www.hexinwang.cn/)- 云上网络、混合云网络、数据仓库、机器学习、视觉智能!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

处理filter与fixed的冲突策略

发布时间:2024-07-05 16:02:24 所属栏目:语言 来源:DaWei
导读: 这篇文章主要给大家分享关于filter与fixed冲突的内容,下文会给大家介绍filter与fixed冲突的原因及解决方法,需要的朋友可以参考,接下来我们一起来学习一下吧。

问题描述

当在 body
这篇文章主要给大家分享关于filter与fixed冲突的内容,下文会给大家介绍filter与fixed冲突的原因及解决方法,需要的朋友可以参考,接下来我们一起来学习一下吧。

问题描述

当在 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>

解决方案

产生这个问题的原因就是:当 filter 不为 none 的时候,如果该元素或者其子元素具有 absolute 或 fixed 属性,那么它会为其创建一个新的包含块/容器,会造成该 absolute 或 fixed 元素的定位发生变化(就是改变了 absolute 或 fixed 元素的定位<父>元素,变成新创建的元素)。

以上面的例子说明,当在 body 标签中使用了 filter 属性后, filter 就会生成一个新的包含块,其位置大小和 body 一样,然后 fixed 元素就会根据这个包含块进行定位,所以我们会看到 fixed 元素失去原有的特性;

但是,如果 filter 作用在根元素(即 html 标签)时,它是不会为 absolute 或 fixed 子元素创建新的包含块的。

所以解决方案也就很简单了,只需要将 filter 属性放在 html 标签上就好了

html {
    filter: grayscale(1);
}

以上就是关于filter与fixed冲突的原因和解决方法的介绍啦,希望大家阅读完这篇文章能有所收获。

(编辑:拼字网 - 核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章