position定位与float一样，也是css排版中非常重要的概念。position从字面意思可以理解就是指定块的位置，即块相对于其父块的位置和相对于它自身应该在的位置。
position属性:
static 静态（默认），无特殊定位
relative 相对 对象不可重叠
absolute 绝对，将对象从文档流中拖出
fixed 悬浮 使元素固定在屏幕的某个位置
inherit 继承
1.相对定位（relative）
如果对一个元素进行相对定位，可在它所在的位置上，通过设置垂直或水平位置，让这个元素相对于起点进行移动。如果将top设置为40像素，那么框出现在原位置顶部下方10像素的位置。如果将left设置为40像素，那么会在元素左边创建40像素的空间，也就是将元素向右移动。
<style>
*{margin:0;
padding:0;}
#main{
position:relative;/*相对定位*/
left:10px;
top:40px;
background-color:pink;
float:left;
height:200px;
width:200px;
}
.one{
width:300px;
height:300px;
background-color:yellowgreen;}
</style>
</head>
<body>
<div class="one">one</div>
<div id="main"> main</div>
</body>
</html>
相对定位
main DIV相对于one定位
2.绝对定位（absolute）
绝对定位实际上被看做普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。与其相反，绝对定位使元素的位置与文档流无关，因此不占据空间，普通文档流中其他元素的布局就像绝对定位的元素不存在一样。简单地说，使用了绝对定位之后，对象就浮在网页上面了
上面例子改成
position:absolute;
绝对定位
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块
简单的来说：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
注意：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。
3.浮动定位（fixed）
生成绝对定位的元素，相对于浏览器窗口进行定位
