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. 转 让FPGA替代GPU的6大顾虑,你确定不看看吗?

    最近FPGA又频频被各AI领域的巨头看好,比如微软.百度.科大讯飞都对FPGA应用前景有所期待.那么如果让你选择FPGA作为AI计算系统的主力军,你会有什么样的顾虑? 这几天,已经退役的AlphaGo ...

  2. 2019-11-25-win10-uwp-发布旁加载自动更新

    原文:2019-11-25-win10-uwp-发布旁加载自动更新 title author date CreateTime categories win10 uwp 发布旁加载自动更新 lindex ...

  3. Quartz.net任务调度

    一.Quartz.net简介 Quartz.net是一个开源的任务调度框架,很多定时任务.调度任务都可以用这个框架,如定时日志等. 二.Quartz.net用途 定时给女朋友发送消息 女朋友生日的时候 ...

  4. C#与vb.net源码代码互转网站

    该转换器是印度开发团队推出的,推出时间也挺长,仅支持C#和VB.net代码转换.代码转换地址: C# -> VB.NET  http://www.dotnetspider.com/convert ...

  5. NeatUpload .NetFromWork4.0 config配置

    NeatUpload使用---config配置(可进行大文件传输) configuration> 下增加: <configSections> <sectionGroup nam ...

  6. js、jquery、css属性及出错集合

    *)注意使用jquery设置css的语法 css("propertyname","value");#单个时时逗号 css({"propertyname ...

  7. Java引用类型原理深度剖析,看完文章,90%的人都收藏了

    本文为synchronized系列第二篇.主要内容为分析偏向锁的实现. 偏向锁的诞生背景和基本原理在上文中已经讲过了. 本文将分为几块内容: 1.偏向锁的入口 2.偏向锁的获取流程 3.偏向锁的撤销流 ...

  8. 350道面试题分享,拿下京东offer工资double

    350道面试题分享,拿下京东offer工资double 前言: 面试,其实是一个双向选择的过程,在这个过程里,我们不应该抱着畏惧的心态去对待,这样反而会影响自己的发挥.同时看中的应该不止薪资,还要看你 ...

  9. js中this由来

    这篇文章主要是讲述js中的this是什么?是怎么来的? 我们首先创建一个person对象,如下: var person = { name: 'wyh', age: 22, sayHi: functio ...

  10. SQL行转列,列转行

    SQL 行转列,列转行 行列转换在做报表分析时还是经常会遇到的,今天就说一下如何实现行列转换吧. 行列转换就是如下图所示两种展示形式的互相转换 行转列 假如我们有下表: SELECT * FROM s ...