position:fixed默认是相对浏览器定位的。

就是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化;

MDN对position: fixed有一个注释:

当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先。

也就是说如果想让fixed不相对浏览器定位,只要给它的随便哪个祖先设上非none的transform,问题就解决了。这祖先可以是static的,也就是说随便哪个祖先都行。比如说给body设一个transform: translateZ(0);,测试有效。

不过想让 position:fixed 的元素相对于父元素定位,应该改成 absolute 以及父元素 relative。而不是让 fixed 干不应该干的事。相对父元素定位需要position fixed吗?难道这是想搞事情啊!脱离党指导路线的都不是什么好路子!

而且transform会对定位产生副作用,建议尽量避免一起使用。

如何让position fixed不再基于浏览器窗口定位的更多相关文章

  1. 父节点使用css的transform: translate(0, 0)时position:fixed在chrome浏览器中无效

    今天在做移动端的页面,无意间发现了一个Chrome浏览器下的一个bug,在使用CSS3的transform: translate(0, 0)属性对节点A进行位置转化,此时A节点下面有一个字节点B,节点 ...

  2. position:fixed相对父级元素定位而不是浏览器

    position:fixed默认是相对浏览器定位的 原理:fixed定位相对父级容器定位,不添加:top,bottom,left,right样式,通过margin定位 代码:http://jsbin. ...

  3. position fixed 相对于父级定位

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. [z]兼容IE6的相对于浏览器窗口定位

    http://blog.uedsc.com/css-position.html http://www.w3cmm.com/notepad/css-position.html http://sofish ...

  5. position:fixed 相对父元素定位

    position:fixed是对于浏览器窗口定位的,要实现相当于父元素定位,可以这样: 不设置fixed元素的top,bottom,left,right,只设置margin来实现. 这种方法本质上fi ...

  6. position:fixed not work?

    问题 在position:fixed的使用中,突然发现某个操作之后,fixed定位的位置变了?? bottom:0,left:0.本来应该在最下面,结果跑没影了. wtf?position:fixed ...

  7. 解决IE6浏览器下position:fixed固定定位问题

    像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...

  8. 移动Web开发,4行代码检测浏览器是否支持position:fixed

    不废话,直接上代码 var div = document.createElement('div'); div.style.cssText = 'display:none;position:fixed; ...

  9. position:fixed 兼容浏览器低版本

    项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代 ...

随机推荐

  1. 【UOJ#308】【UNR#2】UOJ拯救计划

    [UOJ#308][UNR#2]UOJ拯救计划 题面 UOJ 题解 如果模数很奇怪,我们可以插值一下,设\(f[i]\)表示用了\(i\)种颜色的方案数. 然而模\(6\)这个东西很有意思,\(6=2 ...

  2. Disruptor系列(一)— disruptor介绍

    本文翻译自Disruptor在github上的wiki文章Introduction,原文可以看这里. 一.前言 作为程序猿大多数都有对技术的执着,想在这个方面有所提升.对于优秀的事物保持积极学习的心态 ...

  3. Logstash:处理多个input

    Logstash:处理多个input Logstash的整个pipleline分为三个部分: input插件:提取数据. 这可以来自日志文件,TCP或UDP侦听器,若干协议特定插件(如syslog或I ...

  4. Mysql设置binlog过期时间并自动删除

    问题: Mysql数据库由于业务原因,数据量增长迅速,binlog日志会增加较多,占用大部分磁盘空间. 解决方案: 出于节约空间考虑,可进行删除多余binary日志,并设置定期删除操作. .查看bin ...

  5. python常用库简单使用( PyPDF2 )

    PyPDF2学习 1  这个模块的名字对大小写是敏感的,所以,确保y是小写的,其他字母都是大写的

  6. JVM底层原理及调优之笔记一

    JVM底层原理及调优 1.java虚拟机内存模型(JVM内存模型) 1.堆(-Xms -Xmx -Xmn) java堆,也称为GC堆,是JVM中所管理的内存中最大的一块内存区域,是线程共享的,在JVM ...

  7. Hbase基本原理

    一.hbase是什么 HBase 是一种类似于数据库的存储层,也就是说 HBase 适用于结构化的存储.并且 HBase 是一种列式的分布式数据库,是由当年的 Google 公布的 BigTable ...

  8. 二十:职责链模式详解(类似于spring的hangler处理请求)

    定义:为了避免请求的发送者和接收者之间的耦合关系,使多个接受对象都有机会处理请求.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. “看这个定义,就是将一堆可以处理请求的对象连 ...

  9. jQuery 选择器有61种你都知道了多少

    下面列举了61种jQuery 选择器 参考 选择器 语句 描述 * $("*") 选择所有元素 #id $("#lastname") id=“lastname” ...

  10. 关于重学Linux的随笔

    毕业已有半年, 现在想想真的后悔, 大学没有认真学Linux, 导致现在Linux操作抓瞎, 连服务器都搭不起来. 下定决心重学Linux, 不追求能比上大佬, 但是要熟练, 常用命令要熟悉. 作为一 ...