1，了解絕對定位和相對定位
要了解定位你要先了解文檔流，在文檔流中相對定位的元素占有位置，而且會影響後面的元素（塊元素、行内塊元素），比如兩個div并排，另外一個會換行。
<div>111</div>
<div>222</div> 而絕對定位就是把該元素從文檔流中踢出，不會占用文檔流的位置，也不會影響後面的元素。
<div style="position: absolute;">111</div>
<div>222</div> 如上面的執行個體，111和222會重疊，審查元素你會發現222有實際位置，111沒有位置。他是使用left，right，top，bottom等屬性相對于其最接近的一個最有定位設定的父對象進行絕對定位，如果不存在這樣的父對象，則依據body對象。而其層疊通過z-index屬性定義 。
網頁布局涉及到各種裝置各種分辨率下的相容，是以就注定絕對定位不能适用于大部分場景。。是以布局隻能依賴于上級元素的位置，而不能依賴于裝置的高度和寬度。
适合絕對定位的場景主要是一些頁面輔助功能
差別：絕對定位會脫離文檔流,文檔中不保留其定位前的位置,相對定位不會脫離文檔流,定位前的位置依然保留。
2，什麼時候用
實際上很少單獨用到絕對定位，因為分辨率或視窗大小一旦改變，絕對定位的東西就有可能會移動位置影響設計效果，你是無法确定所有人的分辨率都和你制作頁面使用的分辨率是一樣的。
是以：通常都是相對定位的父元素裡面嵌套一個或多個絕對定位的子元素，這用就能避免分辨率和視窗大小的改變而影響設計效果。
3，實際應用（子絕父相）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father{
width: 300px;
height: 300px;
background-color: coral;
position: relative;
border: solid 3px red;
}
#son1{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
left: 20px;
top: 50px;
}
#son2{
width: 100px;
height: 100px;
background-color: chartreuse;
position: absolute;
left: 40px;
top: 90px;
}
</style>
</head>
<body>
<div id="father">
I am father
</div>
<div id="son1">
I am son1
</div>
<div id="son2">
I am son2
</div>
</body>
</html> ![十大酷炫屌的圖像懸停特效[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)