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. Window权限维持(八):时间服务器

    Windows操作系统正在利用时间提供者体系结构,以便从网络中的其他网络设备或客户端获取准确的时间戳.时间提供者以DLL文件的形式实现,该文件位于System32文件夹中.Windows启动期间将启动 ...

  2. ansible碎碎念

    1. Using a SSH password instead of a key is not possible because Host Key checking is enabled and ss ...

  3. LeetCode 1290. Convert Binary Number in a Linked List to Integer

    题目 /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListN ...

  4. 【maven】【IDEA】idea中使用maven编译项目,报错java: 错误: 找不到符号 【2】

    =================================================================================== idea中使用maven编译项目 ...

  5. 第三方web ide开发环境下vuejs开发HMR环境搭建-码农这样开发是快乐的!

    vuejs是一个非常优秀的前端框架,利用该框架可以快速开发出任何web app,之所以vuejs开发非常高效快捷,其中最重要的一点就是利用webpakc提供的HMR(热模块替换)特性,可以边写vue组 ...

  6. java 的11个特性

    以下11个特性来自于著名的"java白皮书"中,博主会针对这些特性一一进行粗略的解释.相信看完博主的这篇文章,以后在和小伙伴们吹牛逼,可就有了切实可靠的理论依据了. 11个特性分别 ...

  7. shell 统计nginx日志中从指定日期到结束日期之间每天指定条件匹配的总次数

    公司给出一个需求,指定时间内,统计请求driver.upload.position(司机位置上报接口)中,来源是华为push(come_from=huawei_push)的数量,要求是按天统计. 看一 ...

  8. Ext学习之路——Ext.define

    Ext.define('My.awesome.Class', { someProperty: 'something', someMethod: function() { alert(s + this. ...

  9. linux 广播和组播

    广播和组播 广播,必须使用UDP协议,是只能在局域网内使用,指定接收端的IP为*.*.*.255后,发送的信息,局域网内的所有接受端就能够接到信息了. 广播的发送端代码 #include <st ...

  10. Mysql 数据库部署(解压免安装)

    下载压缩包,解压. 在根目录下添加my.ini, 复制一下内容,保存. [mysqld] skip-grant-tables #绑定IPv4和3306端口 bind-address = 0.0.0.0 ...