絕對定位
position：absolute
設置爲絕對定位的元素框將會從文檔流中完全刪除，並相對於其包含塊（父元素）定位，包含塊可能是文檔中的另一個元素或者是初始包含塊（body）元素。
絕對定位會脫離文檔流，並且不佔空間，普通文檔流的元素的佈局會認爲絕對定位的元素不存在，所以絕對定位的元素可以覆蓋在其他元素上，可以通過 z-index 來控制這些層的相應順序。
<html>
<head>
<style type="text/css">
/* 由於 div1 沒有已定位的祖先元素，所以此處以 body 爲準 */
.div1{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 50px;
}
/* 以父類的位置爲標準，也就是 div1 */
.div2{
width: 50px;
height: 50px;
background: gray;
position: absolute;
left: 50px;
top: 80px;
}
</style>
</head>
<body>
<div class="div1">
div1
<div class="div2">
div2
</div>
</div>
</body>
效果圖：
效果圖中，div2 的父元素是 div1 ，以 div1 爲基準。div2 距離 div1 的 top 80px，left 50px 。
絕對定位不會佔用原來的空間，以下面的代碼生產的效果圖示例：
<html>
<head>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: blue;
position: relative;
}
.div2{
width: 50px;
height: 50px;
background: gray;
position: absolute;
left: 20px;
}
#span1{
width: 100px;
height: 30px;
background: green;
display: inline-block;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<span id="span1">
1
</span>
</div>
</body>
</html>
效果圖：
圖中，灰色 div2 的框覆蓋住了綠色的 span1 ，不在佔用原來的空間
相對定位
position:relative
設置爲相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所佔的空間仍保留。
相對位置的座標參考系是以自己上一次的位置作爲原點參考，其實也就是相對於自己的位置。
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: blue;
left: 50px;
}
/* 自己的原本位置爲標準，也就是左上角 */
.div2{
width: 50px;
height: 50px;
background: gray;
position: relative;
left: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
效果圖：
相對定位是以它最初的位置爲準，因爲 div1（藍色） 是父類，所以它最初位置在 div1 內，然後它距離左邊 100px。
相對定位的元素，將會佔用原來的空間，示例代碼：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: blue;
position: relative;
}
.div2{
width: 50px;
height: 50px;
background: gray;
position: relative;
left: 20px;
}
#span1{
width: 100px;
height: 30px;
background: green;
display: inline-block;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"> </div>
<span id="span1">
1
</span>
</div>
</body>
</html>
效果圖：
如圖說是，灰色的 div2 依舊佔用着空間，所以 span1 只能放在下面
注意：
如果有文字的情況下，如果在有文字的範圍內，那麼長度或者高度要包括文字的長度和高度。在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框。
還有， 當 position:absolute 會改變 display 類型，也就是 inline-block 方式進行顯示。
其他
- static（默認值）
- 該元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
- 元素框正常生成。塊級元素生成一個矩形框，作爲文檔流的一部分，行內元素則會創建一個或多個行框，置於其父元素中。
- 表示沒有定位
- fixed
- 元素框的表現類似於將 position 設置爲 absolute，不過其包含塊是視窗本身。
- 固定定位的元素不會隨瀏覽器窗口的滾動條滾動而變化，也不會受文檔流動影響，而是始終位於瀏覽器窗口內視圖的某個位置。
總結
相對定位是“相對於”元素在文檔中的初始位置，而絕對定位是“相對於”最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼“相對於”最初的包含塊（body）。