relative和absolute

relative 相对定位

1. 幻影瞬移

absolute属性也有瞬移技能，不同之处在于：absolute属性以天空或其他外界限制计算瞬移位置；而relative属性由于是凡人肉体，偏移能力有限，只能通过自身所在位置计算瞬移位置。

且relative属性的这种瞬间移动之际实际上是一种障眼法，其真身依旧在原来的位置上，您所看到了其身体的移动不过是幻影而已。因此，relative属性的这种技能被世人称为“幻影瞬移”。

relative left/right top/bottom relative的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

虽然看上去位置变化了，但是依旧占着原来的位置

relative 相对定位元素进行位移后，表现内容已经脱离了文本流，只是在本文流中还为原来的相对对定位留下了原有的总宽与总高（内容的高度或是宽度加上 margin\border\padding的数值）。这说明在相对定位中，虽然表现区脱离了原来的文本流，但是在文本流中还还有此相对定位的老窩。这点要特别注意，因为在实际应用中如果相对定位的位移数值过大，那么原有的区域就会形成一块空白。

Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定

有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

这种技能，类似于一个被称为visibility:hidden的家伙的天生技能，不过position:relative是瞬移，visibility:hidden则是隐身。

2. 纵云梯
position:relative虽是凡夫肉体，但是却有只有神魔才有的“纵云梯”技能，亦称“垂直升空”的本事。借助z-index这把御剑，就能直接腾空9万里，越于其他凡人之上。

且其纵云梯的技能和纯魔鬼血统的position:absolute的技能是平起平坐的。如果两者纵云梯的高度一致（z-index值一样），谁后发制人谁就是上面显示。

3. 限魔大法

可能相对定位的前世是绝对定位父亲的关系，position:relative天生可以限制position:absolute在left/top翅膀下瞬间移动的能力。好像是如来的大手掌限制了孙猴子的筋斗云一样

四、霸气外露的relative属性

虽然relative属性值外表看上去就像个普通人一样，但是，由于其自身非常强大的本领，所以其内在的气场非常强大，可谓霸气外露。

例如，虽然relative属性要借助z-index采能实现任意高度的纵云梯，但是，实际上，即使没有z-index这把御剑，在凡人之中，其纵云之气已经完全震慑周围。例如，凡人标签在margin负值下，后者会覆盖前者，如下图所示：

但是，普普通通的元素一旦应用了position:relative，其霸气就会外露出来，立马显示在其他元素之上。如下图所示：

margin-left 负值会让后面的元素遮住自己----解决办法：给自己添加一个属性relative

在IE6浏览器下，当元素负margin超出父标签的部分会被隐藏掉解决办法：给自己添加一个属性relative

五、IE6你太看得起relative了

IE6浏览器再relative属性的认识上貌似出现了些偏差，真把relative当作absolute的父亲了，实际上，知道过去这段历史的人应该知道，二者其实是同一辈分的人，很多时候是平起平坐的，尤其在z-index纵云梯技能的使用上。

在IE6浏览器下，如果最外部父标签的云梯层级为1的话，就算里面absolute元素的层级是9999，也比不上其他父标签层级2，里面absolute元素的层级是99的云梯高度。

定位这个东西，如果要使用相对定位属性或是绝对定位属性，我个人比较推荐如下组合：

absolute+margin（左上角元素定位，作用于当前元素）、

float+relative（右上角元素定位，作用于当前元素）、

relative+absolute（右下角元素定位，直接父标签+当前定位元素）。

而目前web届大肆使用的外层div层设置relative属性，里面一些absolute元素定位的方法是不推荐的。

在CSS中关于定位的内容是：position:relative | absolute | static | fixed

static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。

relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。

absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
fixed（固定定位） 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
注：
CSS中定位的层叠分级：z-index: auto | namber;

auto 遵从其父对象的定位
namber 无单位的整数值。可为负数

来自：http://www.zhangxinxu.com/wordpress/2011/08/css%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8Drelative%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8Dabsolute%E7%B3%BB%E5%88%97%EF%BC%88%E5%9B%9B%EF%BC%89/