1.文档流，普通流和常规流
在看别人写的博客里面和一些教程关于定位会出现文档流，普通流和常规流这三个术语，一直不懂他们的意思和区别。其实！这三个术语表达的是一个意思（在官方文档中都是document flow），不过因为中译本的原因，不同的书籍采用了不同的翻译。那么这三个术语的意思是什么呢？意思就是：元素按照HTML的顺序一次排列，你可以理解为顺序结构。
2.static
在介绍absolute和relative之前，有必要介绍一下static（很容易忽略的）。在w3cschool的教程中，static是默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
3.absolute
首先来w3cschool教程上的定义：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
在来CSS参考手册的定义：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
下面上一段解释的代码和图片：
1 <div style="height: 100px; 100px;background-color: red;position: static;"> 2 static 3 </div> 4 <div style="height: 100px; 100px;background-color: blue;position: absolute;top: 20px;left: 20px;"> 5 absolute 6 </div>
大家可以看到absolute是覆盖了static的，这就是absolute脱离文档流并且不影响文档流任何元素的意思。而它的定位是相对于最近的定位了的父元素（这一点w3cschool的定义是有问题的），如果上面没有定位了的父元素，就依据body来进行定位（笔者的这段代码就是依据body进行的定位）。
4.relative
还是首先上w3cschool上的定义：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
然后是CSS参考手册：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
然后是代码和图片
1 <div style="height: 100px; 100px;background-color: red;position: static;"> 2 static 3 </div> 4 <div style="height: 100px; 100px;background-color: blue;position: relative;top: 20px;left: 20px;"> 5 absolute 6 </div>
首先解释什么是正常位置：就是你没有使用relative的时候，元素（就是那个蓝色的方框）的默认位置（也就是你现在看到的红色方框的位置）。什么是遵循文档流，相对于absolute就是你可以有位置的偏移，但是不覆盖本来的位置。所以你看到relative相对于本来的位置是整体的偏移。
笔者认为relative和absolute在显示（注意是显示）上的区别就是可不可以覆盖的问题。