position定位與float一樣，也是css排版中非常重要的概念。position從字面意思可以理解就是指定塊的位置，即塊相對(duì)于其父塊的位置和相對(duì)于它自身應(yīng)該在的位置。
position屬性:
static 靜態(tài)（默認(rèn)），無(wú)特殊定位
relative 相對(duì) 對(duì)象不可重疊
absolute 絕對(duì)，將對(duì)象從文檔流中拖出
fixed 懸浮 使元素固定在屏幕的某個(gè)位置
inherit 繼承
1.相對(duì)定位（relative）
如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，可在它所在的位置上，通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素相對(duì)于起點(diǎn)進(jìn)行移動(dòng)。如果將top設(shè)置為40像素，那么框出現(xiàn)在原位置頂部下方10像素的位置。如果將left設(shè)置為40像素，那么會(huì)在元素左邊創(chuàng)建40像素的空間，也就是將元素向右移動(dòng)。
<style>
*{margin:0;
padding:0;}
#main{
position:relative;/*相對(duì)定位*/
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>
相對(duì)定位
main DIV相對(duì)于one定位
2.絕對(duì)定位（absolute）
絕對(duì)定位實(shí)際上被看做普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。與其相反，絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間，普通文檔流中其他元素的布局就像絕對(duì)定位的元素不存在一樣。簡(jiǎn)單地說(shuō)，使用了絕對(duì)定位之后，對(duì)象就浮在網(wǎng)頁(yè)上面了
上面例子改成
position:absolute;
絕對(duì)定位
絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素，如果元素沒(méi)有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊
簡(jiǎn)單的來(lái)說(shuō)：相對(duì)定位是“相對(duì)于”元素在文檔中的初始位置，而絕對(duì)定位是“相對(duì)于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對(duì)于”最初的包含塊。
注意：因?yàn)榻^對(duì)定位的框與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其它元素。
3.浮動(dòng)定位（fixed）
生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位
