定位標簽：position

包含屬性：relative（相對）?absolute（絕對）

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

相對定位：relative 沒有脫離正常的文檔流，被設置元素相對于其原始位置而進行定位，其原始占位信息仍存在

2.position:absolute; 表示絕對定位，位置將依據(jù)瀏覽器左上角開始計算。 絕對定位使元素脫離文檔流，因此不占據(jù)空間。普通文檔流中元素的布局就像絕對定位的元素不存在時一樣。（因為絕對定位的框與文檔流無關(guān)，所以它們可以覆蓋頁面上的其他元素并可以通過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中發(fā)生占位。

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

總結(jié)

以上是生活随笔為你收集整理的定位position详解:relative与absolute的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。