两者共同特点是：

  1. 改变文档流
  2. 激活元素left、top、right、bottom、z-index属性
  3. 让元素”浮起来“，z-index>0

不同的是：

1.position：relative 会保留元素自己在z-index：0层的占位，其left、top、right、bottom是相对于自己在z-index：0层的位置。

2.position：absolute 完全脱离文档流，不保留元素自己在z-index：0层的占位，其left、top、right、bottom是相对于自己最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位

光看理论可能还无法有具体认识，所以来上图，有图有真相╰( ￣ ▽ ￣ )╭

（图片来源于：CSS+DIV定位分析(relative,absolute,static,fixed) - 心碎乌托邦的日志 - 网易博客 http://blog.163.com/love_heartbreaking/blog/static/124561901201211334714800/）

1.relative保留占位

2.absolute不保留占位

3.relative相对于占位

4.absolute相对于自己最近的定义为absolute或relative的父层

5.absolute父层中都未定义absolute或relative，则相对body进行定位

知识点摸清 - - position属性值之relative与absolute的更多相关文章

  1. position 属性值：relative 与 absolute 区别

    absolute 能让元素 inline-block 化: 例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度. float ...

  2. 列出display的值，说明他们的作用。position的值， relative和 absolute定位原点是？

    display的值: block 像块类型元素一样显示. none 像行内元素类型一样显示. inline-block 像行内元素一样显示, 但其内容像块类型元素一样显示. list-item 像块类 ...

  3. 510，position的值，relative和absolute定位原点是

    (absolute:生成绝对定位的元素) position属性用来规定元素的定位类型和方式 ①position:static 默认值,没有定位,元素出现在正常的流中: ②position:fixed  ...

  4. position属性值4缺一带你了解相对还是绝对抑或是固定定位

    阿基米德说“给我一个支点,我能翘起整个地球”,在HTML页面中,给你一个坐标,可以把任何一个元素定位目标点,这就是定位!CSS有三种基本的定位机制:相对定位.绝对定位.固定定位,决定定位的positi ...

  5. css中的position属性值的探究

    css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...

  6. css3中animation属性animation-timing-function知识点以及其属性值steps()

    在animation中最重要的其实就是时间函数(animation-timing-function)这个属性,他决定了你的动画将以什么样的速度执行,所以最关键的属性值也就是cubic-bezier(n ...

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

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

  8. position的static、relative、absolute、fixed、inherit

    网上有很多关于position的讲解,也有很多他们属性之间的比较,但是比较全面的讲解还是比较少,每次看完过段时间就忘了,所以今天参考了很多网上现有的资源,自己整理一下,写下这篇文章. position ...

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

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

随机推荐

  1. 关于C语言中用Keil软件制作Lib库文件的几点经验

    1.关于制止LIB库文件的几点经验 1. 一个工程如何生成lib文件: 2. 一个生成lib文件的工程可以调用这个工程中不存在的函数,只需要在.h文件中声明这些不存在函数的原型,然后在调用这个lib文 ...

  2. 7.微软AJAX的解决方案

    Asp.net中内置的简化AJAX开发的控件UpdatePanel非常方便,但是它会带了许多viewstate,所以高手们并不喜欢它.但它开发在内网应用时可以考滤 放入ScriptManager,将要 ...

  3. c++virtual inline 是否冲突

    关于inline关键字:effective c++ item33:明智运用inlining.说到:inline指令就像register指令一样,只是对编译器的一种提示,而不是一个强制命令,意思是编译器 ...

  4. 创办支持多种屏幕尺寸的Android应用

    创建支持多种屏幕尺寸的Android应用 Android涉及各种各样的支持不同屏幕尺寸和密度的设备.对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的 ...

  5. nginx -- 安装配置Nginx

    安装说明 系统环境:CentOS-6.3 软件:nginx-1.2.6.tar.gz 安装方式:源码编译安装  安装位置:/usr/local/nginx  下载地址:http://nginx.org ...

  6. 启动tomcat的 startup.bat屏幕一闪而过

    有时启动tomcat 时,屏幕一闪而过,看不到是那里有问题.要想让屏幕停下来,做法如下: 1.打开 startup.bat 文件,在文件最后加上最后加一行@pause 2.重新运行 startup.b ...

  7. leetcode 栈 括号匹配

    https://oj.leetcode.com/problems/valid-parentheses/ 遇到左括号入栈,遇到右括号出栈找匹配,为空或不匹配为空, public class Soluti ...

  8. msql修改字符

    我申请了一个jsp空间,把数据库传上去,编码如下mysql> show variables like '%char%';+--------------------------+--------- ...

  9. Delphi 对象的创建(create)与释放(free/destory)

    Delphi 对象的创建(create)与释放(free/destory) 1.Create参数为:nil/self/application的区别,最好能看到实际效果的区别 例如: My := TMy ...

  10. 《A First Course in Probability》-chaper2-概率论公理

    概率论自身有一套很深的理论体系,读过<几何原本>的读者会知道,伟大的欧几里得之所以伟大,是因为它基于几条最基本的公理,推导除了整个欧式几何学的理论体系,同样,在概率论这里,一切的推导都是源 ...