普通定位

positiont：static

普通文档流中的元素的position的默认值为static，无需主动声明。忽略top、right、bottom、left和z-index。

相对定位

position：relative

.relative{    position:relative;    left:20px;    top:20px;}

拥有relateive类的元素将相对于原来的位置向右移动20px，向下移动20px。而且无论怎么移动，元素也依旧会占据原来的位置。

绝对定位

position：absolute

绝对定位的元素与文档流无关，因此不占据任何空间。

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。若没有这样的父元素，那么它的位置是相对于初始包含块。

固定定位

position：fixed

生成固定定位的元素，相对于浏览器窗口进行定位。

开源中国中右下角绿色的”top“功能，就是这样定位。

通过chrome的开发工具查看了下，代码是这样的。

浮动

float：left | right

浮动的元素不在普通文档流中，因此文档流中的块框表现得就像浮动元素不存在一样。