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. Prometheus监控学习笔记之Prometheus查询无数据或者Grafana不显示数据的诡异问题

    0x00 概述 Prometheus和Grafana部署完成后,网络正常,配置文件正常,抓取agent运行正常,使用curl命令获取监控端口数据正常,甚至Prometheus内的targets列表内都 ...

  2. Windows cmd 和 PowerShell 中文乱码问题解决

    临时方案: 在命令行下输入:chcp 65001 长期方案: 要修改注册表,自己网上搜吧

  3. AES加解密异常java.security.InvalidKeyException: Illegal key size

    AES加解密异常 Java后台AES解密,抛出异常如下:java.security.InvalidKeyException: Illegal key size Illegal key size or ...

  4. vue3.0和2.0的区别,Vue-cli3.0于 8月11日正式发布,更快、更小、更易维护、更易于原生、让开发者更轻松

    vue3.0和2.0的区别Vue-cli3.0于 8月11日正式发布,看了下评论,兼容性不是很好,命令有不少变化,不是特别的乐观vue3.0 的发布与 vue2.0 相比,优势主要体现在:更快.更小. ...

  5. element-ui的form表单样式改动

    造成下面样式错乱是下面自带的css样式,原本打算通过样式重写在组件内的style,发现下面相应的元素是出于封装情况的,无论样式重写在组件还是在公共样式均不能很好的解决,因为跳转到该页面时都要刷新一次, ...

  6. redis高并发总结

    Redis是单线程的,省去了很多上下文切换线程的时间:(官方答案:因为Redis是基于内存的操作,CPU不是Redis的瓶颈,Redis的瓶颈最有可能是机器内存的大小或者网络带宽.既然单线程容易实现, ...

  7. 关于JMeter线程组中线程数,Ramp-Up Period,循环次数之间的设置概念

    关于JMeter线程组中线程数,Ramp-Up Period,循环次数之间的设置概念 笔者是个刚刚踏入压力测试领域不到2个月的小菜,这里分享一下线程组中3个参数之间关系的个人见解,不喜请!喷!,望大家 ...

  8. Java后端面经总结:拿下蚂蚁金服美团头条 offer 秘诀

    笔者在面过 猿辅导,去哪儿,旷视, 陌陌,头条, 阿里, 快手, 美团, 腾讯之后,除了收获一大堆面试问题,还思考到如何成为面试官眼中的”爱技术,爱思考,靠谱,有潜力候选人的”一些”套路”. 面试问题 ...

  9. Ubuntu下使用linuxdeployqt打包Qt程序

    写了点Qt界面程序,然而发现很难移植到其他没有安装Qt环境的电脑上运行.查资料了解到,在windows上有windeployqt程序,linux上有linuxdeployqt可以帮助我们快速打包. 1 ...

  10. zzTensorflow技术内幕:

    性能优势 TensorFlow在大规模分布式系统上的并行效率相当高,如下图所示: 图5:TensorFlow并发效率 在GPU数量小于16时,基本没有性能损耗,在50块的时候,可以获得80%的效率,也 ...