看这个博客 说的很详细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. VS2010/MFC对话框：颜色对话框

    颜色对话框 在上一节中为大家讲解了字体对话框的使用方法,熟悉了字体对话框,本节继续讲另一种通用对话框--颜色对话框. 颜色对话框大家肯定也不陌生,我们可以打开它选择需要的颜色,简单说,它的作用就是用来 ...

  2. Checking Network Configuration requirements Failed

    安装oracle执行检查,出现 Checking Network Configuration requirements ... Check complete. The overall result o ...

  3. hive原生和复合类型的数据载入和使用

    原生类型 原生类型包含TINYINT,SMALLINT,INT,BIGINT,BOOLEAN,FLOAT,DOUBLE,STRING,BINARY (Hive 0.8.0以上才可用),TIMESTAM ...

  4. Android UI设计

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

  5. HTTP初步注解

    搜集了一下网上的资源和自己看过的一些书,小小总结了一波HTTP,现在也只是很肤浅的了解,期望以后深入理解后能写出更有营养的笔记. HTTP协议的主要特点 + 支持客户/服务器模式.+ 简单快速:客户向 ...

  6. Node.js模块os

    OS 操作系统模块 os.hostname() 操作系统的主机名. os.type() 操作系统的名称 os.release() 操作系统的发行版本 os.uptime() 当前系统的时间 以秒为 o ...

  7. C#第三方zip解压压缩工具，带事例源码

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using ICSharpCode. ...

  8. Sharepoint 2013 --系统安装配置

    参考博客: http://www.cnblogs.com/jianyus/archive/2013/02/01/2889653.html 安装操作系统->改机器名->装AD->装DN ...

  9. 【转】Linq实现DataTable行列转换

    出处:http://www.cnblogs.com/li-peng/ 转换前的table: 转换后的table: 代码里有详细的说明, 还有一些参数我都截图了下面有 using System;usin ...

  10. USB 开发

    http://blog.csdn.net/myarrow/article/details/8484113