CSS position
static
默认值，没有定位。元素框正常生成。块级元素生成一个矩形框，作为文档流(normal flow)的一部分，行内元素则会创建一个或多个行框，置于其父元素中。top,right,bottom,left,z-index属性无效。
W3C这样描述：
z-index：
Only works on positioned elements(position: absolute;, position: relative; or position: fixed.
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
relative就是对默认static定位的相对偏移，也就是说如果top、left都设0，那么此时的relative就跟static基本相同了，否则的话就在static的基础上进行相对偏移。relative的一个重要用处是给设置绝对定位的子元 素确定一个“父容器”。相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
总结：
- static是在normal flow中，原有的位置保留，top,right,bottom,left,z-index属性均无效，而在relative,absolute,fixed这些属性均有效。
- absolute,fixed均不在normal flow中，原有位置不保留，absolute与fixed的区别是包含块，前者的包含块是第一个非static的祖先元素，后者的的包含块是视窗本身。
- relative就是对默认static定位的相对偏移，在normal flow（非浮动）中，原有的位置保留。relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。
包含块
怎么确认一个元素的包含块？
- 根元素：
- 根元素包含块由用户代理建立。在html中，根元素是html 元素，有些浏览器的也会用body做为根元素。大多数浏览器中，初始包含块是一个视窗大小的矩形。
- 非根元素：
- relatice 、static：块级祖先元素
- absolute:非static的祖先元素
- float:块级祖先元素
- Fixed:viewport
- 如果找不到定位的祖先元素，包含块为初始包含块。
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档 的普通流中的块框表现得就像浮动框不存在一样。
浮动框特点:
- 浮动会从正常的流中消失
- 但是一个元素或图像浮动时，其它内容会环绕该元素。
- 浮动元素的外边距不会合并。（BFC）
- 浮动元素的包含块是其最近的块级祖先元素。
- 浮动会生成块级框，无论这个元素原来是什么
- 浮动的边界不会超过父边界，除了设置负外边距
- 浮动的边界一定是另外一个浮动元素或父元素的边界.
- 浮动不会重叠。(BFC)