一个示例

考察下面的代码：

  <head>

    <title>css filter issue</title>

    <style>

      body {

        height: 200vh;

        background: #ddd;

      }

      .container {

        background: grey;

        height: 200px;

      }

      .fixed {

        color: red;

        position: fixed;

        top: 0;

        right: 0;

      }

    </style>

  </head>

  <body>

    <div class="container">

      <div class="fixed">fixed item</div>

    </div>

  </body>

页面中有一个位于右上角 position: fixed 定位的元素。按照预期，在页面滚动时它将固定在那个位置。

正常的 fixed 元素其表现

现在对容器加应用 CSS filter 样式，

 .container {

+  filter: invert(1);

   background: grey;

   height: 200px;

 }

再观察结果，注意到 fixed 元素不再 fixed 了。

fixed 元素不再生效

原因

根据 W3C 对 filter 的描述：

A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided.

对于指定了 filter 样式且值不为 none 时，被应用该样式的元素其子元素中如果有 position 为 absolute 或 fixed 的元素，会为这些元素创建一个新的容器，使得这些绝对或固定定位的元素其定位的基准相对于这个新创建的容器。

相同的情况对 transform 也适用，以下是 W3C 规范的描述：

In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

解决

这里只看 filter 的修复。条件允许的情况下，有如下两种方式。

将 filter 应用到根节点

因为根据规范中对 filter 的描述，如果 filter 应用到根节点，则不会创建新的容器。所以可以将 filter 样式写到 html，如果条件允许的话。

html{

    filter: invert(1);

}

将 `filter` 应用到根节点后的修复

将 filter 应用到非正常定位的元素上

对于 filter 样式，还可以将其只应用到出问题的这些非正常定位的元素身上来解决。

 .fixed {

+   filter: invert(1);

   color: red;

   position: fixed;

   top: 0;

   right: 0;

 }

将 `filter` 应用到固定定位的元素本身身上

相关资源

CSS fixed 定位元素失效的问题的更多相关文章

  1. 『心善渊』Selenium3.0基础 — 8、使用CSS选择器定位元素

    目录 1.CSS选择器介绍 2.CSS选择器定位语法 3.Selenium中使用CSS选择器定位元素 (1)通过属性定位元素 (2)通过标签定位元素 (3)通过层级关系定位元素 (4)通过索引定位元素 ...

  2. 我是如何通过debug成功甩锅浏览器的：解决fixed定位元素，在页面滚动后touch事件失效问题

    如果你关注我应该知道,我最近对PC端页面进行移动适配.在这个过程中,为了节省用户300ms的时间,同时给予用户更及时的点击反馈(这意味着更好的用户体验),我在尝试使用移动端独有的 touchstart ...

  3. Vue——解决移动端键盘弹起导致的页面fixed定位元素布局错乱

    最近做了一个移动端项目,页面主体是由form表单和底部fixed定位的按钮组成,当用户进行表单输入时,手机软键盘弹起,此时页面的尺寸发生变化,底部fixed定位的元素自然也会上移,可能就会覆盖页面中的 ...

  4. 【写给大家看的CSS】定位元素：使用position/display布局

    引言 使用position和display来实现的当鼠标移动到图片上时显示和隐藏文字或者视频的效果. 知识点 1.relative.absolute的使用. 当子元素使用position:absolu ...

  5. 【CSS】定位元素居中显示

    1.利用margin div { width: 100px; height: 100px; background-color: skyblue; position: absolute; top: 50 ...

  6. 章节十、4-CSS Classes---用多个CSS Classes定位元素

    以下演示操作以该网址中的输入框为例:https://learn.letskodeit.com/p/practice 一.使用input[class=inputs]验证元素是否唯一 注意:使用“clas ...

  7. Python+Selenium练习篇之8-利用css定位元素

    前面介绍了,XPath, id , class , link text, partial link text, tag name, name 七大元素定位方法,本文介绍webdriver支持的最后一个 ...

  8. CSS Positioning(定位)

    Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧属性定位.然而 ...

  9. 【CSS】定位层

    html:定位层1.概念: >>.定位层是由html元素(标签)形成的一个特殊的box盒子. >>.其重点在于“定位”,而html元素(标签)的定位方式由CSS来控制. 通常情 ...

随机推荐

  1. SEO优化：浅析关键词出现在网站哪些地方更有利？

    关键词出现在网站哪些地方符合SEO?进行网站的SEO时,关键词需要出现在整个网站的适当地方.下面列出几个重要的关键词摆放的地方.以下列出的10个地方希望能够帮助到大家. 1.网站Title部分. 2. ...

  2. tomcat项目绑定到域名及运行内存配置

    一.tomcat中的项目绑定到域名通过域名访问 1.在tomcat下的conf/server.xml中找到Host修改(1.name为你的域名,2.配置Context中的path为空就是直接访问项目不 ...

  3. 设计一个卖不同种类车的4s店

    # 定义奔驰车类 class BenchiCar(object): # 定义车的方法 def move(self): print('---奔驰车在移动---') def stop(self): pri ...

  4. printf输出格式介绍（转）

    格式代码 A ABC ABCDEFGH %S A ABC ABCDEFGH %5S ####A ##ABC ABCDEFGH %.5S A ABC ABCDE %5.5S ####A ##ABC AB ...

  5. SQL Server中表锁定的原理及解锁演示

    有几个朋友留言建议结合例子来演示一下, 上篇已经说过锁的几种类型, 可以利用系统动态视图sys.dm_tran_locks查看到,重要的栏位如下: resource_type 被锁的资源类型(Data ...

  6. C++ 模板基础

    我们学习使用C++,肯定都要了解模板这个概念.就我自己的理解,模板其实就是为复用而生,模板就是实现代码复用机制的一种工具,它可以实现类型参数化,即把类型定义为参数:进而实现了真正的代码可重用性.模版可 ...

  7. Python_将指定文件夹中的文件压缩至已有压缩包

    from zipfile import ZipFile from os import listdir from os.path import isfile,isdir,join def addFile ...

  8. maven安装和配置及创建maven项目

    (1)下载maven,下载成功后,解压到本地磁盘 里面包含这几项 (2)配置maven环境变量MAVEN_HOME.path (3)最后检验配置是否成功:用win键+R,来打开命令行提示符窗口,即Do ...

  9. 指针超强汇总（谨记优先级：() > [] > *）

    参考:http://blog.chinaunix.net/uid-20120277-id-5760985.html C语言所有复杂的指针声明,都是由各种声明嵌套构成的.如何解读复杂指针声明呢?右左法则 ...

  10. 传统IT公司/创业公司/互联网大公司的offer如何选择？[转载+原创]

    背景介绍: 第一家工作的公司是一家跨国外企安全公司, 骄傲的称自己不是互联网公司而是传统软件公司, 第二家公司是当下最热的知识分享社区, 创业公司. 第三家公司是挤走谷歌, 曾一度称霸中国的搜索引擎公 ...