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. 安卓TV开发(六) 移动智能终端UI之实现类似GridView的焦点控制FocusView框架

    转载请标明出处:http://blog.csdn.net/sk719887916/article/details/40045089,作者:skay 前言 安卓TV开发(五) 移动智能终端UI之实现主流 ...

  2. SharePoint 读取选项字段所有Choise

    对象模型SPFieldChoice SPSite site = SPContext.Current.Site; SPWeb web = site.OpenWeb(SubWebUrl); SPList ...

  3. javascript、ruby和C性能一瞥(3) :上汇编

    在博文(1)和(2)里分别用了4中方式写一个素数筛选的算法,分别是javascript in browser.node.js.ruby和c:最终的结果是c最快,node.js其次,js in b虽然也 ...

  4. 初识MySQL数据库的各种CMD命令窗口下的指令

    今天我们就来看一下数据库的各种命令,以下命令全部是从CMD命令窗口下的命令行输入指令,首先如果如果输入mysql,系统提示"mysql不是内部命令或外部命令.那么这其实是环境变量没有设置好的 ...

  5. ethtool确定网卡对应的物理网口

    在配置有多个网络接口的设备时我们会犯难,eth0.eth1.--到底是那个接口? 我使用的机器是CentOS系统,打开终端,输入ethtool –help 显示帮助信息,下面我就简要介绍一下最常用的两 ...

  6. AOP事务解决方案和分布式事务方案

    http://www.cnblogs.com/jianxuanbing/p/7242254.html http://www.cnblogs.com/jianxuanbing/p/7199457.htm ...

  7. JqueryMobile学习记录一

    安装 做页面之前首先引用三个文件: <link href="/Scripts/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css" rel ...

  8. C#解析json的几种方式

    json格式的数据是javascript原生的一种数据格式,比xml更简洁. 它有两种形式:json对象和json对象数组. 在此之前,有必要解释几个基本概念: json字符串,就是string,它一 ...

  9. JavaScript验证和数据处理的干货(经典)

    在开发web项目的时候,难免遇到各种对网页数据的处理,比如对用户在表单中输入的电话号码.邮箱.金额.身份证号.密码长度和复杂程度等等的验证,以及对后台返回数据的格式化比如金额,返回的值为null,还有 ...

  10. pyCharm安装破解

    补丁破解 下载 http://idea.lanyus.com/jar/JetbrainsCrack-2.7-release-str.jar 并将 JetbrainsCrack-2.7-release- ...