CSS之position定位

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。不设置position属性时，默认也是这种情况。

relative（相对定位）

• 相对定位的元素是相对于其在文档流中原来的位置进行定位
• 相对定位的元素不会脱离文档流，它原本所占的空间仍保留。
• 相对定位会比static定位的元素高一个层级（可以理解相对定位的z-index比static定位的z-index大）

fixed（固定定位）

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

• 会使元素脱离文档流
• 这种定位方式是相对于浏览器窗口的
• 元素框从文档中完全删除
• 会使内联元素变为块状元素（脱离文档流了）
• 比static定位的元素高一个层级
• 固定定位的元素会固定在浏览器窗口的某个位置，不会随滚动条滚动
• IE6不支持固定定位

absolute（绝对定位）

• 会使元素脱离文档流
• 该定位方式相对于其包含块
• 绝对定位的元素比static定位的元素高一个层级
• 绝对定位会使内联元素变为块状元素（脱离文档流了）

关于position:absolute;相对于其包含块详解

这种定位方式，其相对的是离他最近的position不为static的祖先元素，因此它相对的可能并不是其父元素，注意这一点即可。