这块内容涉及较多，先上一些概念的解释
CSS定位（positioning)：属性的一种，允许对元素进行定位，也就是让你可以自由设置你的元素框出现在你想让它出现的地方
定位机制有3种：普通流、浮动和定位。
1、普通流就是正常的文档流，在HTML里面的写法就是从上到下，从左到右的排版布局。
2、浮动：（flaot）脱离文档流，不占空间。
3、定位：（position）
Static：保持文档流。
Relative（相对定位）：相对本身的原始位置发生位移且保持文档流，占空间。
Absolute（绝对定位）：脱离文档流，不占空间且相对于其包含块来定位。
Fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
以上几点都说明，元素默认下是处于文档流中且占据一定空间，而浮动将会托体文档流而浮动在文档流之上，如果不加设置将会覆盖文档流中的内容，但是可以通过 clear属性 来清楚浮动，具体原理请看底部
然后定位是可以视情况来设定，使用灵活。
4、z-index：该属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面。仅能在定位元素上奏效（例如 position:absolute)
浮动参考：http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html
文档流参考：http://blog.sina.com.cn/s/blog_68150d100101229a.html
CSS笔记【2】：定位和浮动
原文地址：http://www.cnblogs.com/Junda/p/7698682.html