position:absolute
对象指定这个属性后，生成绝对定位的元素，对象会悬浮着，显示的上层，如果不指定left和top属性，还是显示在其原来的位置，只是悬浮在最上面，其后面的元素会上移，占据其原来的位置，因为是悬浮在最上面，所以下面的元素会被挡住一部分（如果对下面元素指定relative属性就不会被挡住）；如果指定left和top属性，那是相对于文档的位置显示

position:relative
对象指定这个属性后，生成相对定位的元素，并显示在最上层，不会被绝对定位的元素挡住，并其left和top属性也是相对与其父元素的位置

absolute是将元素绝对定位，是相对于文档元素位置，是悬浮，原空间会被占用
relative是将元素相对定位，是相对于其父元素位置，是悬浮，原空间不会被占用
relative元素会悬浮在比absolute元素更高位置上面

总结就四点要注意：
1.absolute是绝对定位，relative是相对定位
2.absolute原空间会被下面的元素占用，relative原空间不会被下面的元素占用
3.relative元素会显示在absolute元素上面
4.这则都会让元素悬浮，处在别的元素上方，这是相同的地方


如下代码看一下就知道
<table border="1">
<tr>
   <td>1<br/><div style="width:100px; height:50px; background-color:blue;position:absolute;"></div>2<br/>3<br/>4<br/>5<br/></td>
</tr>
<tr>
   <td>1<br/><div style="width:100px; height:50px; background-color:red;position:relative;"></div>2<br/>3<br/>4<br/>5<br/></td>
</tr>
<tr>
   <td>1<br/><div style="width:100px; height:50px; background-color:blue;position:absolute;"></div><div style="width:100px; height:50px; background-color:red;position:relative;"></div>2<br/>3<br/>4<br/>5<br/></td>
</tr>
<tr>
   <td>1<br/><div style="width:100px; height:50px; background-color:red;position:relative;"></div><div style="width:100px; height:50px; background-color:blue;position:absolute;left:30px;"></div>2<br/>3<br/>4<br/>5<br/></td>
</tr>
</table>