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. 高通Android display架构分析

    目录(?)[-] Kernel Space Display架构介绍 函数和数据结构介绍 函数和数据结构介绍 函数和数据结构介绍 数据流分析 初始化过程分析 User Space display接口 K ...

  2. SharePoint 调用WebService操作List小记

    简述:在SharePoint的使用中,经常需要进行系统集成这样的操作,我们作为SharePoint开发,就需要给其他系统提供接口,而SharePoint提供的WebService就很好的提供了这样的功 ...

  3. app ionic1 微信 微博 分享功能的实现

    微信分享 1.登录微信开放平台注册账户 2.创建一个移动应用  (app)  审核过后会有一个appid 之后安装插件的时候会用到 3.在这个应用上面填写 包名 和  签名   就可以了 包名和签名的 ...

  4. https证书链不完整

    公司的一个域名,用浏览器打开能正常访问,但是在linux下使用curl命令,总是报错,报错信息如下: curl: (60) Peer certificate cannot be authenticat ...

  5. MySQL中遇到的几种报错及其解决方法

    MySQL中遇到的几种报错及其解决方法 1.[Err] 1064 - You have an error in your SQL syntax; check the manual that corre ...

  6. cannot import name '_imaging' 与No module named PIL解决方法

    今天学习廖雪峰的python 第三方模块pillow一章. 直接使用from PIL import Image 会报"No module named PIL",显然这是没有安装pi ...

  7. 关于JavaScript的那些话

    1.初学者动手环境----推荐Chrome的控制台(F12调用)2.JS中两个非常重要的数据类型是对象和数组.3.JavaScript 程序是用Unicode字符集编写的.4.JavaScript是区 ...

  8. 关于运行springboot时报Unregistering JMX-exposed beans on shutdown的解决方案

    其实这个错误并不影响程序的运行,但是对于处女座的同仁来说,看到报错难免不舒服,那么看看解决方法,此错误信息的意思是说:在关机状态下未注册jmx暴露的bean. 解决方案是在入口类上加上  @Enabl ...

  9. NewLife.Net——网络压测单机1.88亿tps

    NewLife.Net压力测试,峰值4.2Gbps,50万pps,消息大小24字节,消息处理速度1.88亿tps! 共集合20台高配ECS参与测试,主服务器带宽6Gbps.100万pps,16核心64 ...

  10. 部署SSIS包完成远程数据更新

    ** 温馨提示:如需转载本文,请注明内容出处.** 本文连接:http://www.cnblogs.com/grom/p/9018978.html 笔者需要定期从服务器更新N家客户的远程服务器数据,上 ...