淺淅css定位position:relative與absolute用法

定位標籤：position

包含屬性：relative（相對）

                   absolute（絕對）

1.position:relative; 如果對一個元素進行相對定位，首先它將出現在它所在的位置上。然後通過設定垂直或水平位置，讓這個元素”相對於”它的原始起點進行移動。（再一點，相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其他框）

相對定位：relative 沒有脫離正常的文檔流，被設定元素相對於其原始位置而進行定位，其原始佔位資訊仍存在

2.position:absolute; 表示絕對位置，位置將依據瀏覽器左上方開始計算。 絕對位置使元素脫離文檔流，因此不佔據空間。普通文檔流中元素的布局就像絕對位置的元素不存在時一樣。（因為絕對位置的框與文檔流無關，所以它們可以覆蓋頁面上的其他元素並可以通過z-index來控制它層級次序。z-index的值越高，它顯示的越在上層。）

絕對位置：ablution 脫離了文檔流與浮動模型，獨立於其他對象而存在，沒有佔位。

3.父容器使用相對定位，子項目使用絕對位置後，這樣子項目的位置不再相對於瀏覽器左上方，而是相對於父視窗左上方

 下面具體案例說明：

1。若c嵌套在b中，且b,c均是相對定位，則c的相對定位是相對於b而言的，b保留佔位資訊，且b中保留c的佔位資訊。

2。若c嵌套在b中，b進行絕對位置，c進行相對定位，則b脫離浮動，沒有佔位資訊，而c相對b定位，並在b中發生佔位。

3。若a,b,c,d並列，且都嵌套在id為group的div中，且：

代碼如下	複製代碼
#group{potision:relative;height:200px;width:4oopx;}         #b{potision:absolute;left:20px;top:20px;}

在這種方式下，父級元素是相對定位，但沒有設定left,top的值，可以將其看做是浮動物件，而b是絕對位置，因而不佔位，但由於父級元素是相對定位，所以這裡的絕對位置變成了相對於父級元素的絕對位置，而不是相對於瀏覽器的。
例如：

代碼如下	複製代碼
<div id=”main”> <div id=”a”>aaaaaaaaaa</div> <div id=”b”>bbbbbbbb</div> </div>

（1）若給a設定position：absolute，會使a脫離正常的文檔流，a會不佔位，即b不再基於a，而是直接從parent開始定位。（b位置和沒有a一樣）。

若給a設定position:relative，（沒有脫離文檔流）則a會佔位，a相對於他的原始位置進行定位，看上去是浮在main上的，而b會按原來的方式進行排列，不受a的影響。（b的位置和a沒有position屬性時一樣）
（2）若給main設定position：relative/absolute；則裡面的a或b的絕對位置或相對定位都是相對於父級元素main的，之後後再按照相對或絕對的方法進行定位
注意：若父級元素沒有設定有效寬高值，則b是相對於group中最後一個元素的右上方進行絕對位置父級元素要設定寬高