CSS的position屬性。首先歸納出和position相關的問題：
position作為一個屬性，它一共有哪幾個屬性值？
position常用的屬性值有哪幾個？分別有什麼特點？
第一個問題：position作為一個屬性，它一共有哪幾個屬性值？
對於position屬性，他一共有5個值，分別是
static：默認值。沒有定位，元素出現在正常的流中。
relative：生成相對定位的元素，相對於其正常位置進行定位。正常位置也就是指如果沒有position屬性它會出現的位置。
absolute：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。這裡需要注意一下，absolute的參照對象是第一個擁有非static的position屬性的父級元素，後面會詳細解釋。
fixed：生成絕對定位的元素，相對於浏覽器窗口進行定位。
規定應該從父元素繼承 position 屬性的值。
這種定義性質的問題，一般在W3cSchool上可以找到最標准的的答案，這5種屬性的解釋已經非常詳細。其實我們在開發中經常用的只有relative、absolute、fixed這3個屬性，另外當給元素增加了這是種屬性中的任意一種，我們也就需要根據情況設置元素的left/top/right/bottom以及z-index，元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定，顯示層級通過z-index控制。
第二個問題：position常用的屬性值有哪幾個？分別有什麼特點？
上面已經提到了我們常用的3個屬性值：relative、absolute、fixed。
relative：元素的position屬性設置為relative後，這個元素會以自己之前的位置為參照，根據設置的left等值進行移動。下面舉個栗子~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 100px;
height: 100px;
background-color: #0044aa;
margin: 5px;
}
#div2{
width: 100px;
height: 100px;
background-color: #e13b00;
margin: 5px;
position: relative;
left: 50px;
top:50px;
z-index: -2;
}
#div3{
width: 100px;
height: 100px;
background-color: yellow;
margin: 5px;
}
</style>
</head>
<body>
<div style="height: 1000px">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
效果如下:
http://hovertree.com/texiao/css/15/
第二個div是根據它之前的位置進行了移動，並且它之前的位置並沒有被後面的元素占據。紅色的div被黃色的div遮蓋是因為z-index的作用。
absolute：對於position屬性是 static 定位以外的第一個父元素進行定位。這裡需要詳細分析一下這句話：首先我們可以判斷出，absolute定位參照的對象是它擁有定位屬性的父級元素；然後，這個父級元素的position屬性不能是static。
這裡再想細一點：如果元素沒有擁有position屬性的父級元素怎麼辦？ 這裡我通過查資料確定了這種情況它會根據標簽也就是頁面的根節點進行定位。（注意是標簽）
下面將div2的position屬性改為absolute查看效果：
http://hovertree.com/texiao/css/15/1.htm
這樣我們就可以發現紅色div移動之前的位置會被黃色的占據，這時候其實表示紅色的div已經脫離了文檔流。
最後一個屬性值：fixed.它的效果其實和absolute類似，都屬於絕對定位，但是它的參照則是固定的浏覽器窗口。修改div2的position屬性改為fixed後，滾動鼠標滾軸就可以查看效果，利用這個特性我們可以做出類似側邊懸浮窗（某些網站側邊的小廣告(ノ?益?)ノ彡┻━┻）這樣的效果。
其實，我在學習position過程中感覺到，掌握好元素的參照物是理解position屬性的關鍵，確定好參照物，然後再根據屬性值的類型判斷後面的元素的狀態，就能確定好元素的位置啦~
PS：通過這幾天自己提問自己想辦法解答的學習過程，真的收獲很多。其實平時學習過程中忽略的細節還是很多的，經歷了這樣的一個過程自己的基礎知識又扎實了不少~另外我還發現利用博客來分享知識更是個快樂的過程，又能提高編程技術又能提高表達能力，同時還有可能幫助到別人，所以一定要堅持下去！！(╰_╯)#
2016年1月11日
不積跬步，無以至千裡