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. 你不得不知的Golang线程模型 [转载]

    原著:翟陆续(加多) 资深Java , 著Java并发编程之美 一.前言 本节我们来探讨Go的线程模型,首先我们先来回顾下常见的三种线程模型,然后在介绍Go中独特的线程模型. 二.三种线程模型 线程的 ...

  2. Window权限维持(八):时间服务器

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

  3. PHP--常用配置项

    一.简介 PHP的配置项可以在配置文件php.ini中配置,也可以在脚本中使用ini_set()函数临时配置. 二.常用配置项 1.错误信息相关配置 1)display_errors 设定PHP是否将 ...

  4. springcloud分布式事务Atomikos实例

    0.JTA(Java Transaction Manager)的介绍 (1)jta与jdbc 简单的说 jta是多库的事务 jdbc是单库的事务 (2)XA与JTA XA : XA是一个规范或是一个事 ...

  5. 2019 物易云通java面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.物易云通等公司offer,岗位是Java后端开发,因为发展原因最终选择去了物易云通,入职一年时间了,也成为了面 ...

  6. GitBash上传项目出现[fatal: remote origin already exists.]问题解决方案

    问题截图如下: 当出现这个问题时,不要慌,只需要输入 git remote rm origin 就可以解决,输入完前面的命令后再次 输入 git remote add origin https://. ...

  7. shiro加密算法

    第一节的时候我介绍过,shiro有很多加密算法,如md5和sha,而且还支持加盐,使得密码的解析变得更有难度,更好的保障了数据的安全性. 这里我们要介绍的是md5算法,因为比较常用.首先我们来看看md ...

  8. 使用Composer安装阿里云短信失败

    安装步骤 请参考以下步骤,使用Composer安装依赖. 如果在您的系统上全局安装Composer,您可以在项目目录中运行以下内容,将 Alibaba Cloud Client for PHP 添加为 ...

  9. Java基础回顾——反射+案例

    一,引言: 从大二刚开始接触java,了解其基本语法,到用swing编写图形界面的程序,到JavaWeb用SSH三大框架编写小网站,后面又学SSM,SpringBoot,SpringCloud等.可以 ...

  10. <转>WPF 中的绑定

    在WPF应用的开发过程中Binding是一个非常重要的部分. 在实际开发过程中Binding的不同种写法达到的效果相同但事实是存在很大区别的. 这里将实际中碰到过的问题做下汇总记录和理解. 1. so ...