参考源：http://blog.csdn.net/chen_zw/article/details/8741365
我们先来看看CSS3 Api中对position属性的相关定义：
- static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
- Relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
- Absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
- Fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
什么是文档流？
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。
静态定位(static) ：
static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的。
相对定位(relative) ：
relative定位，又称为相对定位，从字面上来解析，我们就可以看出该属性的主要特性：相对。但是它相对的又是相对于什么地方而言的呢？这个是个重点，也是最让我迷糊的一个地方，现在让我们来做个测试，我想大家都会明白的：
(1) 初始没有定位
<!DOCTYPE html><html lang="en"><head> ???<meta charset="utf-8"> ???<style> ???????#first{width:200px;height:100px;border:1px solid red;} ???????#second{width:200px;height:100px;border:1px solid blue;} ???</style></head><body> ???<div id="first">first</div> ???<div id="second">second</div></body></html>初始原图：
(2) 我们修改first元素的position属性：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="utf-8"> ???<style> ???????#first{width:200px;height:100px;border:1px solid red; ???????????????position:relative;top:20px;left:20px;} ???????#second{width:200px;height:100px;border:1px solid blue;} ???</style></head><body> ???<div id="first">first</div> ???<div id="second">second</div></body></html>相对偏移20px后，结果如下，虚线是初始的位置：
CSS中position属性( absolute | relative | static | fixed )详解
原文地址：http://www.cnblogs.com/momo8238/p/7427861.html