詳解定位屬性position中的：relative與absolute

定位標籤：position

包含屬性：relative（相對）

                   absolute（絕對）

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

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

2.position:absolute; 表示

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

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中最後一個元素的右上角進行絕對定位父級元素要設置寬高！ ！ ！ ！ ！ ！

以上是詳解定位屬性position中的：relative與absolute的詳細內容。更多資訊請關注PHP中文網其他相關文章！