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. Gradle 1.12用户指南翻译——第四十二章. Announce插件

    本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...

  2. ruby抓取web页面

    一种方法是Net::HTTP.new方法,返回resp码和实际的data: require 'net/http' h = Net::HTTP.new("www.baidu.com" ...

  3. 二叉树(LeetCode) C++相关知识代码 系列1

    0.二叉树最大深度 原题目:Given a binary tree, find its minimum depth.The minimum depth is the number of nodes a ...

  4. asp.net session分布式共享解决方案

    Session共享是分布式系统设计时必须考虑的一个重要的点.相比较java中的session共享解决方案,.net中的解决方案还是比较少,MemcachedSessionProvider类库是比较优秀 ...

  5. winform 写App.config配置文件——IT轮子系列(八)

    前言 在winform项目中,常常需要读app.config文件.如: var version = System.Configuration.ConfigurationManager.AppSetti ...

  6. Windows上模拟Linux环境的软件Cygwin

    Windows上模拟Linux环境的软件Cygwin 2010-10-11 15:19      我要评论(0) 字号:T|T Cygwin是一个用于在Windows上 模拟Linux环境的软件.它可 ...

  7. 利用XShell上传、下载文件(使用sz与rz命令),超实用!

    借助XShell,使用linux命令sz可以很方便的将服务器上的文件下载到本地,使用rz命令则是把本地文件上传到服务器. 其中,对于sz和rz的理解与记忆我用了如下的方法(很多时候容易搞混): sz中 ...

  8. JS实现数组去重的6种方法总结

    方法一: 双层循环,外层循环元素,内层循环时比较值,如果有相同的值则跳过,不相同则push进数组. Array.prototype.distinct = function(){ var arr = t ...

  9. 有关于二分搜索的常见问题(java实现)

    前言: 二分搜索是一个非常常见的面试题目,它具有非常广泛的用途.熟练的掌握二分搜索的基本形式和他的变式是非常重要的.接下来我们将使用java实现一些常见的有关二分搜索的问题. 具体内容: 1.二分搜索 ...

  10. SOFA 源码分析 — 负载均衡和一致性 Hash

    前言 SOFA 内置负载均衡,支持 5 种负载均衡算法,随机(默认算法),本地优先,轮询算法,一致性 hash,按权重负载轮询(不推荐,已被标注废弃). 一起看看他们的实现(重点还是一致性 hash) ...