fixed:固定定位           absolute:绝对定位

在没有滚动条的情况下两者其实没有差异。但是在有滚动条后,fixed始终会在定好的位置不动,而absolute会随参照对象元素的宽高变化为移动。

一般fixed用在遮盖层和固定在页面某个位置(固定在顶端的菜单栏 / 弹出框居中显示 / 页面两侧的广告位等)。

在遮罩中最好使用fixed代替absolute,这样即使在敦东的时候,也能始终让遮罩盖住整个窗口!!!

测试代码,拖动滚动条看差异

<style>
body {
  height:1000px;/*让窗体出现滚动条*/
}
.fixed {
  position: fixed;
  width: 100px;
  height: 100px;
  right: 0;
  color:blue;
  border: 2px solid blue;

}
.absolute {
  position: absolute;
  width: 100px;
  height: 100px;
  color:red;
  border: 2px solid red;
}
</style>

<div class="fixed">fixed定位</div>
<div class="absolute">absolute定位</div>

滚动前:

滚动后:

fixed 和 absolute 定位的区别的更多相关文章

  1. Css fixed和absolute定位差别

    fixed:固定定位 absolute:绝对定位 差别非常easy: 1.没有滚动栏的情况下没有差异 2.在有滚动栏的情况下.fixed定位不会随滚动栏移动而移动.而absolute则会随滚动栏移动 ...

  2. position:relative/static/fixed/absolute定位的区别以及使用场景

    absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它 ...

  3. 移动端的文本框获取焦点时导致fixed或absolute定位的按钮被手机键盘顶上去的问题

    var win_h = $(window).height();//关键代码 window.addEventListener('resize', function () { if($(window).h ...

  4. 关于移动端的文本框获取焦点时导致fixed或absolute定位的按钮被手机键盘顶上去的问题

    var win_h = $(window).height();//关键代码 window.addEventListener('resize', function () { if($(window).h ...

  5. Position属性四个值:static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  6. fixed和absolute的区别

    今天在实际项目中,写首页一屏的时候,发现页脚定位(position:absolute:)没有达到我想要的效果(不管屏幕大小,页脚始终相对浏览器底部定位).于是我觉得有点奇怪,然而我旁边的小哥说:很明显 ...

  7. css中postion的fixed与absolute区别详解

    fixed:固定定位,参照位置是浏览器窗口的左上角,即坐标点为(0px, 0px) absolute:绝对定位,参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先 ...

  8. fixed定位与absolute定位

    相同点: 1.fixed定位和absolute定位都是绝对定位 2.fixed定位和absolute定位都脱离了标准文档流, 3.未设置偏移量时,都定位在父元素的左上角 tip:元素设置相对定位或绝对 ...

  9. Position属性四个值:static、fixed、absolute和relative的区别

    1.static(静态定位):默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative(相对定位):生成相对 ...

随机推荐

  1. SharePoint 2013 新建网站集图解(绝对菜鸟篇)

    前言:接触SharePoint的人可能是越来越多,但是很多人一接触就很迷茫,在技术群里问如何新建网站集,这样一篇图解,帮助新手学习在搭建好SharePoint环境之后,如何创建一个网站集,做一个基本的 ...

  2. objective-c随机数+日期格式显示一例

    在原来的代码上有修改,主要为: 将准备随机数方法放到了init中,这样不用手动调用了 setWeek方法已经过时,使用的是setWeekOfYear方法 在此放一份以备以后查找: le.h // // ...

  3. obj-c编程18:多对多的观察者模式

    我们知道使用委托的设计模式可以实现一对一的通知关系,但是如果需要通知多个观察者状态变化又该如何呢?此时,需要实现观察者模式之类的内容,而不是实现委托者一对一的模式. 观察者模式定义了一个对象可以将另一 ...

  4. rails4 new没有生成prototype.js之类的脚本解决办法

    早期版本的rails在新生成程序时会在/public/javascript目录中自动放入若干个js脚本.不过在rails4.2.0中无论是否加-j选项,都不会生成这些脚本文件了.解决办法是安装prot ...

  5. MOOS通配符订阅

    MOOS通配符订阅 简介 通配符订阅是MOOSV10的重要进步,客户端可以通过此方式订阅名字和来源符合简单正则表达式的数据. 现在仅支持"*"和"?"两种通配符 ...

  6. 如何让DIV中的文字垂直居中

    var h = $("div").innerHeight(); $("#text").css("font-size", h); $(&quo ...

  7. Dubbo性能调优参数及原理

    本文是针对 Dubbo 协议调用的调优指导,详细说明常用调优参数的作用域及源码. Dubbo调用模型 常用性能调优参数 参数名 作用范围 默认值 说明 备注 threads provider 200 ...

  8. 万水千山ABP - 时区问题

    关于时间和时区问题,后面的参考文章中有详细的描述. 我遇到的问题是: 在MVC视图页面中,显示记录的生成时间 CreationTime <div> @Model.CreationTime ...

  9. 排序算法入门之希尔排序(java实现)

    希尔排序是对插入排序的改进.插入排序是前面元素已经有序了,移动元素是一个一个一次往后移动,当插入的元素比前面排好序的所有元素都小时,则需要将前面所有元素都往后移动.希尔排序有了自己的增量,可以理解为插 ...

  10. jboss7开发配置指南

    1      Jboss7下载与安装 1.1     官方下载 路径:http://www.jboss.org/jbossas/downloads,目前最新稳定版本为7.1.1 final,分别有zi ...