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. mybati源码之ReuseExecutor

    /** * @author Clinton Begin */ public class ReuseExecutor extends BaseExecutor { private final Map&l ...

  2. 高仿qq健康

    概述 学习别人的代码,在此基础上 优化代码结构 增加动画 要点记录 通过mRatio参数,让宽高始终是一个比例 贝塞尔曲线手动画矩形圆角 画虚线 根据基准点绘制文字 属性动画的使用 画笔宽度的自适应 ...

  3. OVS+DPDK Datapath 包分类技术

    本文主体内容译于[DPDK社区文档],但并没有逐字翻译,在原文的基础上进行了一些调整,增加了对TSS分类器的详细阐述. 1. 概览 本文描述了OVS+DPDK中的包分类器(datapath class ...

  4. Fragment生命周期与Fragment执行hide、show后的生命周期探讨

    一.Fragment 生命周期中的每个方法的意义与作用: 1.setUserVisibleHint()(此方法不属于生命周期方法):设置Fragment 用户可见或不可见时调用此方法,此方法在Frag ...

  5. 多重影分身——C#中多线程的使用二(争抢共享资源)

    只要服务器承受得了,我们可以开任意个线程同时工作以提高效率,然而 两个线程争抢资源可能导致数据混乱. 例如: public class MyFood { public static int Last ...

  6. springMVC 中的restful 架构风格

    RESTful架构 : 是一种设计的风格,并不是标准,只是提供了一组设计原则和约束条件,也是目前比较流行的一种互联网软件架构.它结构清晰.符合标准.易于理解.扩展方便,所以正得到越来越多网站的采用. ...

  7. Failed to complete obtain psql count Master gp_segment_configuration Script Exiti

    问题: 在初始化过程中,如到以下问题: gpadmin-[FATAL]:-Failed to complete obtain psql count Master gp_segment_configur ...

  8. 兼容 Android 4.4 透明状态栏与导航栏

    http://www.apkbus.com/Android-163388-1-1.html?_dsign=73d41229 android 系统自4.2 开始 UI 上就没多大改变,4.4 也只是增加 ...

  9. 今年暑假不AC - HZNU寒假集训

    今年暑假不AC "今年暑假不AC?" "是的." "那你干什么呢?" "看世界杯呀,笨蛋!" "@#$%^&a ...

  10. 移动端h5实现复制功能

    首先遇到这个需求是就各种百度,但是发现基本都是用js实现,而且兼容性还非常不好. 但是在寻觅和尝试的过程中,发现只需要css代码也可以完全实现的,对需要复制内容的标签加上下面这几行代码就可以了. -w ...