absolute与fixed

共同点：

(1) 改变行内元素的呈现方式，display被置为block；

(2) 让元素脱离普通流，不占据空间；

(3) 默认会覆盖到非定位元素上

不同点：

absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。

当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

absolute与relative

不同点：

absolute的没有设position的父级元素就参照浏览器左上角。

relative参照父级元素原始点，无父级参照body

z-index不能定义父子的上下关系，一定是子上父下

元素定位：

absolute、fixed（IE6不支持）、relative、static

  1. 所有的定位如果left、top、right、bottom属性都为默认值，则为默认定位
  2. absolute定位会脱离文档，浮动起来，多个层重叠可以使用z-index属性改变层叠顺序
  3. absolute定位忽略padding，相对位置为相对定位容器的左上角内边框，

position的absolute与fixed，absolute与relative共同点与不同点的更多相关文章

  1. [转]关于position 的 static、relative、absolute、fixed、inherit

    本文转自:http://www.56770.com/faq/list/?id=410 position 有五个值:static.relative.absolute.fixed.inherit. sta ...

  2. z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

    今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所 ...

  3. 细谈position属性:static、fixed、relative与absolute

    学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就是窗体自上而下分成一行一行,并在每行中按照从左到右 ...

  4. position 有五个值：static、relative、absolute、fixed、inherit。

    position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 ...

  5. [转]Html position（static、relative、absolute、fixed）

    转自:http://blog.csdn.net/topviewers/article/details/21644305 讲解不错,转载备忘. position的四个属性值: 1.relative2.a ...

  6. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  7. 前端~定位属性position（relative、absolute、fixed）的分析

    前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...

  8. position 的值absolute、fixed、relative和static的定位原点是什么

    position 的值absolute.fixed.relative和static的定位原点是什么 absolute 成绝对定位的元素,相对于值不为static的第一个父元素进行定位,也可以理解为离自 ...

  9. CSS - 定位属性position使用详解（static、relative、fixed、absolute）

    position 属性介绍 (1)position 属性自 CSS2 起就有了,该属性规定元素的定位类型.所有主流浏览器都支持 position 属性. (2)position 的可选值有四个:sta ...

随机推荐

  1. 腾讯助理PHP开发工程师外包岗面经

    校招错过腾讯了,在社招上看到腾讯有招外包岗,要求比正式岗低,于是抱着试一试的心态投了简历,没一会就收到了笔试题,还算简单. 第二天收到面试官的面试邀请,然后去面试了…… 腾讯里面真是漂亮,光是看装潢就 ...

  2. C++复习:类和对象

    类和对象 基本概念 1)类.对象.成员变量.成员函数 2)面向对象三大概念 封装.继承.多态 3)编程实践     类的定义和对象的定义,对象的使用     求圆形的面积     定义Teacher类 ...

  3. 使用sigaction函数

    sigaction函数 修改信号处理动作(通常在Linux用其来注册一个信号的捕捉函数) :失败:-1,设置errno 参数: act:传入参数,新的处理方式.oldact:传出参数,旧的处理方式. ...

  4. C# 泛型可能导致的装箱操作陷阱

    代码如下,已解释 public bool TryGetValue(K key, out V value) { //注意这里,如果key是普通值类型,如int,key == null的判断会导致int的 ...

  5. linux 一个读写锁的异常导致的故障

    环境信息: WARNING: kernel version inconsistency between vmlinux and dumpfile KERNEL: vmlinux-47.90 DUMPF ...

  6. Linux sed命令使用方法

    sed(Stream Editor)是Linux中文本处理使用非常广泛的工具,可以对文件内容进行替换.删除.新增.选取特定行等功能.下面通过sed常用实例介绍sed命令的使用方法. sed基本语法 s ...

  7. Docker 批量启动

    批量配置IP for i in `docker ps -a|awk 'NR>1 {print $NF}'`;do IP=`echo $i|awk -F_ '{print "192.16 ...

  8. HTTP中的Get与Post

    Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这 样认为:一个URL地址,它用于描述一个网络上的资源,而HTT ...

  9. git---远程仓库版本回滚

    开发中,发现有错误版本提交带远程分支master,怎么处理? 1 简介 最近在使用git时遇到了远程分支需要版本回滚的情况,于是做了一下研究,写下这篇博客. 2 问题 如果提交了一个错误的版本,怎么回 ...

  10. package.json---入门说明

    直接的说:就是管理你本地安装的npm包 一个package.json文件可以做如下事情: 展示项目所依赖的npm包 允许你指定一个包的版本[范围] 让你建立起稳定,意味着你可以更好的与其他开发者共享 ...