執行個體講解深入學習CSS網頁定位元素

1. position:static|無定位
position:static是所有元素定位的預設值, 一般不用註明，除非有需要取消繼承的別的定位
example:
#div-1 {
 position:static;
}
2. position:relative|相對定位
使用position:relative，就需要top,bottom,left,right4個屬性來配合，確定元素的位置。
如果要讓div-1層向下移動20px,左移40px:
example:
#div-1 {
 position:relative;
 top:20px;
 left:40px;
}
如果用到相對定位，緊隨他的層divafter是不會出現在div-1的下方，而是和div-1在同一個高度出現。
 
可見， position:relative;並不是很好用。
3. position:absolute|絕對位置
使用position:absolute;,能夠很準確的將元素移動到你想要的位置，
讓我將 div-1a 移動到頁面的右上方:
example:
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
使用絕對位置的div-1a層前面的或者後面的層會認為這個層並不存在，絲毫不影響到他們。所以position:absolute;用於將一個元素放到固定的位置很好用，但是如果需要div-1a層相對於附近的層來確定位置就不要實現了。
*這裡有個Win IE的bug需要提到，就是如果為絕對位置的元素定義一個相對的寬度，那麼在IE下它的寬度取決於父元素的寬度而不是整個頁面的寬度。
4. position:relative + position:absolute|絕對位置+相對定位
如果給父元素(div-1)定義為position:relative;子項目(div-1a)定義為position:absolute，那麼子項目(div-1a)的位置將相對於父元素(div-1)，而不是整個頁面。
讓div-1a定位於div-1的右上方：
example:
<div id="div-1">
<div id="div-1a">
this is div-1a element.
</div>
this is div-1 element.
</div>
#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}