CSS定位

绝对定位（position: absolute;）：

1、绝对定位是脱离了文档流，不会独占一行，它的方位只会受到top,left,bottom,right的影响。

2、一个块的top,left,bottom,right 是相对于什么呢？

1）如果它父元素做了定位，就相对于的是最近的一个父元素。

2）如果父元素没有定位，就相对于Body。

以下一段话引用自张鑫旭《absolute绝对定位的非绝对定位用法》：

position为absolute的元素如果没有设置left, top等值与left:0;top:0的的效果为何不一样？相信您应该知道答案了，例如一个div中有个absolute属性元素，其没有left或是top值，其会像个普通的inline-block属性元素一样静静地呆在这个div里面，但是一旦设置了left:0;top:0对不起，这个absolute元素立马变身，直接从DOM tree里面脱离，独立于文档流，结果相对于最近的relative属性的祖先标签定位（如果没有，就body定位）。

相对定位（position: relative;）：

3、相对定位没有脱离文档流，会单独占满一行，它的方位还会受到top,left,bottom,right的影响。

4、相对定位的top,left,right,bottom是相对于块的最近的一个父元素。

5、一旦脱离文档流就不能设置浮动。

固定定位（position: fixed;）：

6、固定定位脱离了文档流，不会单独占满一行。

7、top,left,right,bottom 始终相对的是body。

静止定位（position:static;）:

8、默认为静止定位。此种情况top,left,right,bottom 不发挥作用。