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. 在 .NET Core 中使用异步的 ADO.NET 的简单示例

    直接贴代码: Program.cs using Microsoft.Extensions.Configuration; using System; using System.Data; using S ...

  2. 【机器学习笔记】Python机器学习基本语法

    本来算法没有那么复杂,但如果因为语法而攻不下就很耽误时间.于是就整理一下,搞python机器学习上都需要些什么基本语法,够用就行,可能会持续更新. Python四大类型 元组tuple,目前还没有感受 ...

  3. C# 学习笔记 多态(一)虚方法

    在面对对象编程中,类的三大特性分别为封装,继承,多态.其中多态的具体实现,依赖于三个方法,也就是虚方法,抽象类和接口. 多态的具体作用是什么呢?或者说多态的存在有什么意义呢?多态的存在有效的降低了程序 ...

  4. C# winform打开新窗体显示一段时间 关闭新窗体

    1.form1的button事件下: form2 form = new form2(); form.Show(); Thread.Sleep(10000);  //form2窗体显示10秒 form. ...

  5. C 补充

    a++与++a的区别 #include <stdio.h> void main(){ int a=5,b=5; int i=0; for(i=0;i<2;i++){ printf(& ...

  6. 原生js与jquery加载页面元素比较

    原生js:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,js提供了window.onload 这个方法事先加载元素 <script type="text/javascrip ...

  7. 基于Proxy的小程序状态管理

    摘要: 小程序状态管理. 作者:wwayne 原文:基于Proxy的小程序状态管理 Fundebug经授权转载,版权归原作者所有. 微信小程序的市场在进一步的扩大,而背后的技术社区仍在摸索着最好的实践 ...

  8. BUUCTF 随便注

    知识点: ##堆叠注入 #预语句注入 https://www.cnblogs.com/0nth3way/articles/7128189.html#autoid-1-0-0 正则过滤了很多关键字导致无 ...

  9. authenticating with the app store 一直卡住--问题记录

    参考链接:https://blog.csdn.net/csdn2314/article/details/90021367 authenticating with the app store 一直卡住最 ...

  10. LeeCode——Second Highest Salary

    Write a SQL query to get the second highest salary from the Employee table. +----+--------+ | Id | S ...