如果position:fixed 失效,那应该是你设置position的元素的父元素中有设置了transform属性哦 。

把 transform删除或设置为none就可以解决啦。

但是如果transform是必要的,不能删除,我们可以在此父级最外层再加一层元素专门用于定位,这样position:fixed就能生效啦。

举个栗子:

/* 一定要将ancestor和parent的大小设置为一样大*/
.ancestor{
position: relative; /*重点*/
width: 300px;
height: 300px;
}
.parent {
width: 300px;
height: 300px;
overflow: auto; /*重点*/
}
.child {
position: absolute;/*重点*/
width: 320px;
height: 320px;
}
嗯...大概意思就这样。

position:fixed 失效的更多相关文章

  1. position:fixed失效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. position:fixed失效情况

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 偏前端 - ios下position:fixed失效的问题解决

    如图,考虑到用户体验的问题,一般页面的下方提交按钮都会随着固定在页面上,方便用户点击. 有些人肯定就说了,这还不简单,position:fixed: 但是在ios这个坑货系统上这个position:f ...

  4. ios解决输入框弹出后position:fixed失效问题

    最近在使用AmazeUI进行仿App Mobile Web开发时遇到了讨论众多的position:fixed问题.position:fixed在安卓2.2以上已经实现,但是在ios8以下系统当小键盘激 ...

  5. position:fixed 失效问题

    为了提升动画性能,在body上加上了transform:translate3d(0,0,0) 但是3d使得新建了一个层(具体原因请参考:高性能css动画),导致position:fixed不在当前的层 ...

  6. position:fixed失效问题

    fixed定位的元素,如果父级有transform样式,值不为none,那么fixed定位就会失效. 解决方法:使用transform样式的元素,不要包含fixed定位的子元素.

  7. ios上position:fixed失效问题

    手机端上的猫腻真是多啊~~~ 此起彼伏! 最近又遇到了 固定定位的底部导航在ios上被弹出去 此时内心1w+个草泥马奔过~~~~~~~~ 直接上解决方案: <div class="ma ...

  8. 不受控制的 position:fixed

    本文为纯理论文章,没有 Demo,没有配图,可能会略微枯燥. 大家都知道,position:fixed 在日常的页面布局中非常常用,在许多布局中起到了关键的作用.它的作用是: position:fix ...

  9. 五行代码终极完美解决从IE6到Chrome所有浏览器的position:fixed;以及闪动问题

    这个方法其实已经使用很久了,之前主要在嵌入式WebQQ等产品中用过,现在拿出来分享一下吧,是目前最简洁的方式来实现ie6的position:fixed; 失效bug,以及的其他方法的闪动问题,CSS代 ...

随机推荐

  1. ELK部署详解--kibana

    kibana.yml # Kibana is served by a back end server. This setting specifies the port to use.#端口server ...

  2. GuGuFishtion HDU - 6390 (杭电多校7E)

    啊啊啊啊...全在纸上 字丑...算了算了 然后除法部分都用逆元就好了 还有逆元打表....学到了...牛逼 #include<map> #include<set> #incl ...

  3. 如何 通过 userAgent 区别微信小程序

    微信内置浏览器: 微信小程序: 有micromessenger是微信内置浏览器,有micromessenger和miniprogram的是微信小程序.  (ios不适用) if(navigator.u ...

  4. QML学习笔记(四)-TabView-竖直方向

    源码:https://github.com/sueRimn/QML-ExampleDemos 作者: 狐狸家的鱼 Github: 八至 版权声明:如需转载请获取授权和联系作者 想实现垂直竖直方向的Ta ...

  5. poj3630 Phone List

    spy on一下,发现是trie裸题,结果一交就T... 然后把cin改成scanf就A了... trie的空间一定要开足,要不然RE #include <cstdio> #include ...

  6. Java 读数据库字段时发现的一个现象

    早上发现有一个网名叫“帅!是不需要理由”的一个人,在后台只能看到“帅!是不需要理”,“由”字就是不显示出来. 经过分析发现,在Access数据库中,name这个字段的长度是15,因为我知道Access ...

  7. isinstance,issubclass,内置函数__str__和__repr__,__format__,dir()函数

    isinstance(obj,cls) 检查是否obj是否是类 cls 的对象 #对象与类之间的关系 判断第一个参数是否是第二个参数的实例 # 身份运算 # 2 == 3 # 值是否相等# 2 is ...

  8. R: 修改镜像、bioconductor安装及go基因富集分析

    1.安装bioconductor及go分析涉及的相关包 source("http://bioconductor.org/biocLite.R") options(BioC_mirr ...

  9. plink:ped格式转换为bed格式

    命令行如下: plink --file FILENAME --make-bed --out FILENAME 第一个FILENAME的后缀为.ped和.map,生成的第二个FILENAME的后缀为.b ...

  10. 手机nv

    NV值是记录手机的射频参数的,和手机的IMEI号.手机信号.WIFI信号等有关,如果NV值刷没了,手机没有这些校准的数据了,会对手机有一定的影响. qcn里面包含手机的imei 所有改变imei就改变 ...