CSS中position属性三大定位方式讲解
Relative
Relative的元素相对于它原本的位置来做定位，但在文档流中依然保持着原有的默认位置，即使它作了偏移，周围的元素也不会占领的它的位置。
如果一个元素是相对定位（甚至它还做了偏移），它周围的元素在排版时参考的依然是那个元素原本的位置（指在没有偏移时的位置）。
如果同时声明top和bottom的值，那么top值的优先级更高。如果同时声明left和right的值，那么优先级取决于网页的语言（例如，英语法语德语西班牙语）。比如，在英语的网页中，left的优先级更高；在阿拉伯语的网页中，right的优先级更高。
Absolute
绝对定位的元素将脱离文档流。即在排版中，绝对定位的元素不再占有它原来的位置，后面的元素将占领它原本的位置。
绝对定位的元素根据它的相对定位（Relative）的父节点的位置定位。如果它没有相对定位的父节点，则直接参考body容器定位。
对绝对定位的元素使用偏移量属性，这个元素将以相对定位的父节点作为参考系进行偏移。如果没有对绝对定位的元素使用偏移量属性，那么该元素将被放置在父节点的左上角。
如果只设置了top属性，那么该元素则只做垂直方向的偏移，而水平方向依然靠着父节点的最左边。
1、如果绝对定位的元素有固定的height和width值：
如果同时声明top和bottom的值，那么top值的优先级更高。如果同时声明left和right的值，那么优先级取决于网页的语言（例如，英语法语德语西班牙语）。比如，在英语的网页中，left的优先级更高；在阿拉伯语的网页中，right的优先级更高。
2、如果绝对定位的元素没有固定的height或者width值：
（1）如果元素并没有固定height值，可是却同时有top和bottom的值，那么该元素将横跨除了top和bottom之外剩下的所有高度。
（2）如果元素并没有固定width值，可是同时有left和right的值，那么该元素将横跨除了left和right之外剩下的所有宽度。
（3）如果元素既没有固定height和width值，却同时有top, bottom, left, right值，那么该元素将占据除了四条边距离之外的所有空间。
Fixed
固定定位的元素跟绝对定位的元素很相似，只不过它参照的坐标系是浏览器的视口(viewport)。固定定位的元素不随着页面滚动而移动，它会始终保持在那个位置。另外，在IE6中使用固定定位有一个BUG，需要使用一些hack来解决。
行内元素设置positon属性后的变化
relative : 不会改变元素的Display属性，原来是什么类型的依旧是什么类型。
absolute | fixed ：行内元素将被重置为块级元素。例如：
<span style="position:absolute; width:100px; height:50px;">span</span>
这是完全正确的。
<span style="position:absolute; display:block; width:100px; height:100px;">span</span>
这里的display:block是多余的。
position 与 float
一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流(这是自己起的名字，呵呵)”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
------------------
【参考资料】
