一、relative
將某一個元素設置爲相對定位後，通過設置left、right、top、bottom，它可以參照自己的原始位置進行移動。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>相對定位示例</title>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px/*左邊距減20px，相對於原來的位置左移20px*/
}
h2.pos_right
{
position:relative;
left:20px/*左邊距加20px,相對於原來的位置右移20px*/
}
</style>
</head>
<body>
<h2>這是位於正常位置的標題</h2>
<h2 class="pos_left">這個標題相對於其正常位置向左移動</h2>
<h2 class="pos_right">這個標題相對於其正常位置向右移動</h2>
</body>
</html>
二、absolute
相對定位是“相對於”元素在文檔中的初始位置，而絕對定位是“相對於”最近的已定位祖先元素（已定位的意思是指設置了position:relative），如果不存在已定位的祖先元素，那麼“相對於”最初的包含塊。層級關係爲：
<div ——————————— position:relative; 不是最近的祖先定位元素，不是參照物
<div—————————-沒有設置爲定位元素，不是參照物
<div———————- position:relative 以這個div爲參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖：
讓box2以橘色div爲參照物
層級關係爲：
<div ——————————— position:relative;最近的祖先定位元素，參照物
<div—————————-沒有設置爲定位元素，不是參照物
<div———————-沒有設置爲定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖：
因爲橘色div是最初的包含塊，所以在都不設置定位的情況下，默認以橘色div爲參照物。
層級關係爲：
<div ———————————沒有設置爲定位元素，不是參照物
<div—————————-沒有設置爲定位元素，不是參照物
<div———————-沒有設置爲定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖：
此外，還要注意僅使用margin屬性佈局絕對定位元素的情況
此情況，margin-bottom 和margin-right的值不再對文檔流中的元素產生影響，因爲該元素已經脫離了文檔流。另外，不管它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。
圖9中，使用margin屬性佈局相對定位元素。
層級關係爲：
<div ——————————— position:relative; 不是參照物
<div—————————-沒有設置爲定位元素，不是參照物
<div———————-沒有設置爲定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果圖：
IE6的情況下，box2前面沒有兄弟節點，則margin-left的值會出現雙倍邊距，見圖10。
層級關係爲：
<div ——————————— position:relative; 不是參照物
<div—————————-沒有設置爲定位元素，不是參照物
<div———————-沒有設置爲定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果圖：
三、fixed
元素框的表現類似於absolute，不過其包含塊是視窗本身。
參考：http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html
