看这个博客 说的很详细http://blog.sina.com.cn/s/blog_647a022e0101b2gn.html

总的来说 这两个属性都是通过增加left和right偏离原来的位置  但是relative仍然保留了原先位置的占位  但是absolute没有 原先位置不占位其他元素会补上

最主要的区别 看原文这句话

对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位

意思就是说 absolute的移动  是基于 含有relative OR absolute 属性的父元素

在看到原文这句话   如果红色背景层定位为absolute，则情形如图4：

红色的直接父元素是绿色的static  该元素没有absolute OR relative 属性  在往上一级  黄色的DIV是离红色元素最亲近的含有 absolute OR relative 的父元素

因此 top left 等属性值是在黄色DIV基础上偏移的

position relative和absolute区别的更多相关文章

  1. css position: relative，absolute具体解释

    关于CSS中 position在布局中非常重要,查了非常多资料都说的非常难理解.以下说说个人的理解: 语法: position: relative | absolute relative: 对象遵循常 ...

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

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

  3. css中的position:relative和absolute 属性

    语法: position : static | absolute | fixed | relative 取值: static :默认值.无特殊定位,对象遵循HTML定位规则 absolute :将对象 ...

  4. position中多次用到了relative和absolute，能不能具体介绍一下这两者的区别？

    position中多次用到了relative和absolute,能不能具体介绍一下这两者的区别? 一个是相对定位,一个是绝对定位. absolute生成绝对定位的元素,相对于 static 定位以外的 ...

  5. position:relative/static/fixed/absolute定位的区别以及使用场景

    absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的 relative 不脱离文档流,absolute 脱离文档流.也就是说:relative 的元素尽管表面上看到它 ...

  6. div和span、relative和absolute、display和visibility的区别

    一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹 ...

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

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

  8. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  9. 定位position详解:relative与absolute

    定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...

随机推荐

  1. POJ 3061 Subsequence（Two Pointers）

    [题目链接] http://poj.org/problem?id=3061 [题目大意] 给出S和一个长度为n的数列,问最短大于等于S的子区间的长度. [题解] 利用双指针获取每一个恰好大于等于S的子 ...

  2. 恢复sudo的权限的命令

    出错的原因:不小心给了/etc/的所有文件的777属性,出现了sudo 的错误. 1.pkexec chmod 0440 /etc/sudoers 2.pkexec chmod 0440 /etc/s ...

  3. Data Guard相关参数学习介绍

    LOG_ARCHIVE_DEST_n 参数属性介绍 该参数的n在11g中为1到31,下列为参数的属性值: u  AFFIRM and NOAFFIRM u  ALTERNATE (not suppor ...

  4. Android 新兴的UI模式——侧边导航栏【转】

    侧边导航栏也就是大家熟知的SliddingMenu,英文也叫Fly-In App Menu.Side Navigation等.当然谷歌现在已经推出类似这个效果的组件--Navigation Drawe ...

  5. Android UI设计

    Android UI设计--PopupWindow显示位置设置 摘要: 当点击某个按钮并弹出PopupWindow时,PopupWindow左下角默认与按钮对齐,但是如果PopupWindow是下图的 ...

  6. Windows NTService 后台框架封装

    对于后台运行的程序,比如基于C/S架构的服务器.各种监控系统的程序.或者是程序额外的功能需要后台运行来实现,在Windows平台中,服务经常会用到,这种对于需要24×7运行的程序是必备的,至少本人经常 ...

  7. 建造者模式->代码示例

    <?php interface Builder{ public function head(); public function body(); public function foot(); ...

  8. this function has none of deterministic, no sql,or reads sql data in its declaration and binary logging is enabled

      原址:http://blog.chinaunix.net/uid-20639775-id-3031821.html   This function has none of DETERMINISTI ...

  9. Git远程仓库的使用(三)

    1)git remote add : 添加远程仓库 git remote add origin git@github.com:用户名.仓库名.git 2) git push –u origin mas ...

  10. python函数cmp()

    cmp(x, y) 中文说明:比较两个对象x和y,如果x < y ,返回负数:x == y, 返回0:x > y,返回正数. 版本:该函数只有在python2中可用,而且在python2所 ...