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. unix设计哲学

    说到Unix为我们所带来的软件开发的哲学,我必需要说一说.Unix遵循的原则是KISS(Keep it simple, stupid).在http://en.wikipedia.org/wiki/Un ...

  2. JAVA加密技术-----MD5 与SHA 加密

    关于JAVA的加密技术有很多很多,这里只介绍加密技术的两种 MD5与 SHA. MD5与SHA是单向加密算法,也就是说加密后不能解密. MD5 ---信息摘要算法,广泛用于加密与解密技术,常用于文件校 ...

  3. IOS中的数据存储方式,特点,使用情况

    数据存储的核心都是写文件,主要有四种持久化方式:属性列表(Plist),对象序列化,SQLite数据库,CoreData. 存储Plist: 键值进行存储,不能存储对象.对象需要序列化编码才能写入文件 ...

  4. python标准库之MultiProcessing库的研究 (1)

    MultiProcessing模块是一个优秀的类似多线程MultiThreading模块处理并发的包之前接触过一点这个库,但是并没有深入研究,这次闲着无聊就研究了一下,算是解惑吧.今天先研究下appl ...

  5. Spring Boot 添加jersey-mvc-freemarker依赖后内置tomcat启动不了解决方案

    我在我的Spring Boot 项目的pom.xml中添加了jersey-mvc-freemarker依赖后,内置tomcat启动不了. 报错信息如下: org.springframework.con ...

  6. OC实现带弹跳动画按钮的界面控制器view

    很多应用都有带弹跳动画发布界面,这里用一个 UIViewController 实现这种效果,外界只要 modal出不带动画这个控制器就可以实现 #import "BSPublishVC.h& ...

  7. 详谈linux中压缩

    1.压 缩 的 用 途 和 技 术 1.1 为什么需要压缩: ①你是否有过文件档案太大,导致无法以正常的email方式发送出去(很多email都有容量大约25MB每封信的限制啊!)? ②你是否有过要备 ...

  8. Odoo 学习【一】http & rpc

    HTTP Odoo 中http类中的Root是wsgi应用的入口主程序. 入口,wsgi_server调用如下: def application(environ, start_response): i ...

  9. 说说Android的MVP模式

    http://toughcoder.NET/blog/2015/11/29/understanding-Android-mvp-pattern/ 安卓应用开发是一个看似容易,实则很难的一门苦活儿.上手 ...

  10. require.js添加css文件实现代码:css.min.js

    define( function () { if (typeof window == "undefined")return { load: function (n, r, load ...