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. 【JS】---5 JS通过事件隐藏显示元素

    JS通过事件隐藏显示元素 在开发中,很多时候我们需要点击事件,才显示隐藏元素.那如何做到页面刚开始就把标签隐藏. 有两种方法: (1) display:none    <div id=" ...

  2. 部署Azure环境Web应用程序不能直接访问JSON文件解决方案

    问题: 部署在Azure环境Web应用程序的JSON文件,直接通过浏览器或Web应用访问出现 404 的错误信息. 以下通过Firfox浏览器直接访问JSON文件返回的提示错误信息: “HTML 文档 ...

  3. Spring Boot 使用 Log4j2 & Logback 输出日志到 EKL

    文章目录 1.ELK 介绍 2.环境.软件准备 3.ELK 环境搭建 4.Spring Boot 配置示例 4.1.Log4j2 方式配置 4.2.Logback 方式配置 1.ELK 介绍 ELK ...

  4. 在js中==和===的区别

    “==”:叫相等运算符 “===”:叫严格运算符 它们两有什么区别呢? == :表示值相等则都为true ===:表示 不仅要值相等,双方类型也要相等才为true 例子如下: js代码如下: // “ ...

  5. PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function【转】

    这篇文章主要介绍了PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function,需要的朋友可以参考下 1.错误类型:PHP致命错误 E ...

  6. PostgreSQL 插入行、查表、导出

    1.连接数据库 使用cmd选择安装路径下的psql.exe     登录用户名为postgres   输入密码进行登录. D:\PostgreSQL\9.6\bin\psql.exe -U postg ...

  7. windows经典主题 桌面颜色(R58 G110 U165)

  8. 安装教程-VMware 12 安装 Windows 10 企业版

    VMware 12 安装 Windows 10 企业版 1.实验描述 在虚拟机中,手动安装 Windows10 企业版操作系统,为一些实验提供平台,因此,有关系统激活问题不再演示.可自行百度,或者加入 ...

  9. 用python提取xml里面的链接源码

    因群里朋友需要提取xml地图里面的链接,就写了这个程序. 代码: #coding=utf-8 import urllib import urllib.request import re url='ht ...

  10. Maven 拥有三套相互独立的生命周期:clean、default、site

    table th:nth-of-type(1) { width: 70px; } table th:nth-of-type(2) { width: 100px; } 生命周期 目的 包含的阶段 cle ...