CSS中Position详解

CSS中的position的四个属性值：
static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

下面使用如下例子讲述这四个属性：

<div id="parent">
     <div id="sub1">sub1</div>
     <div id="sub2">sub2</div>
</div>

relative（相对定位）
不会脱离文档流，相对自身静态位置通过top、bottom、left、right进行偏移（即仍占据原来的静态位置，但是实际显示的时候有所偏移）
假设sub1设置了relative sub2不受任何影响
注意relative的偏移是基于对象的margin的左上侧的。

absolute（绝对定位）
参考距其最近一个不为static的父级元素（无则根据body元素）通过top, bottom, left, right 定位；
sub1定义absolute定位时脱离文档流（即相当于sub1不存在于parent中一样 影响到后面的sub2）
注意这里定位将会从父级元素的padding开始的地方(即只从padding的左上角开始)进行定位

fixed（相对于浏览器窗口来定位）
fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。

static
position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。

absolute和fixed的区别：
absolute的相对位置分为两种情况，在相对于body的情况下
（1）没有滚动条的情况下没有差异
（2）在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动