css position: absolute、relative詳解

時間 2020-02-06

標籤 css position absolute relative 詳解欄目 CSS 简体版

原文原文鏈接

CSS2.0 HandBook上的解釋：css

設置此屬性值爲 absolute 會將對象拖離出正常的文檔流絕對定位而不考慮它周圍內容的佈局。假如其餘具備不一樣 z-index 屬性的對象已經佔據了給定的位置，他們之間不會相互影響，而會在同一位置層疊。此時對象不具備外補丁( margin )，但仍有內補丁( padding )和邊框( border )。
要激活對象的絕對(absolute)定位，必須指定 left ， right ， top ， bottom 屬性中的至少一個，而且設置此屬性值爲 absolute 。不然上述屬性會使用他們的默認值 auto ，這將致使對象聽從正常的HTML佈局規則，在前一個對象以後當即被呈遞。html

TRBL屬性（TOP、RIGHT、BOTTOM、LEFT）只有當設定了position屬性纔有效。
當設定position:absolute
若是父級（無限）沒有設定position屬性，那麼當前的absolute則結合TRBL屬性以瀏覽器左上角爲原始點進行定位
若是父級（無限）設定position屬性，那麼當前的absolute則結合TRBL屬性以父級（最近）的左上角爲原始點進行定位。web

當設定position: relative
則參照父級（最近）的內容區的左上角爲原始點結合TRBL屬性進行定位（或者說相對於被定位元素在父級內容區中的上一個元素進行偏移），無父級則以BODY的左上角爲原始點。相對定位是不能層疊的。在使用相對定位時，不管元素是否進行移動，元素依然佔據原來的空間。所以，移動元素會致使它覆蓋其餘框。瀏覽器

通常來說，網頁居中的話用Absolute就容易出錯，由於網頁一直是隨着分辨率的大小自動適應的，而Absolute則會以瀏覽器的左上角爲原始點，不會應爲分辨率的變化而變化位置。有時還須要依靠z-index來設定容器的上下關係，數值越大越在最上面，數值範圍是天然數。固然有一點要注意，父子關係是沒法用z-index來設定上下關係的，必定是子級在上父級在下。佈局

設置此屬性值爲 relative 會保持對象在正常的HTML流中，可是它的位置能夠根據它的前一個對象進行偏移。在相對(relative)定位對象以後的文本或對象佔有他們本身的空間而不會覆蓋被定位對象的天然空間。與此不一樣的，在絕對(absolute)定位對象以後的文本或對象在被定位對象被拖離正常文檔流以前會佔有它的天然空間。放置絕對(absolute)定位對象在可視區域以外會致使滾動條出現。而放置相對(relative)定位對象在可視區域以外，滾動條不會出現。其實對於定位的主要問題是要記住每一個定位的意義。相對定位是「相對於「元素在文檔流中初始位置的，而絕對定位是」相對於「最近的已經定位的祖先元素。.net

如下是補充：code

雖然有知道css的絕對定位（absolute）、相對定位（relative），但卻從未本身動手寫過相關的效果！
忙活了一大半天，也算是完成了！也把這兩個屬性搞明白了一些！htm

總結以下：對象

先看下面這一個層結構文檔

<body> 

<div id=posi> 

<div id=rel> 此層只應用position：relative;樣式 </div> 
<div id=abs> 此層只應用position：absolute;樣式 </div> 
<div id=sss> 不該用樣式 <div> 

</div> 

</body>

一、absolute：不佔位、relative：有佔位！

如上層結構:

id爲rel的層在顯示時，會佔用一行！其後面的abs層只會在下一行顯示出來！
id爲abs的層在顯示時，會與後面id爲sss的重疊在一塊兒！

二、默認狀況下（不結合top等來定位），absolute（絕對定位）以父層來定位的
如上面的id爲abs的層，若是不結合top等來定位，則其顯示位置會隨父級posi層（posi在文檔左下角，其也會在左下角）

三、在結合top、bottom、right、left等屬性時，absolute（絕對定位）以窗口作爲定位，relative以自身的佔位爲基線作偏移！以下：

<body> 

<div id=posi> 

<div id=sss> 不該用樣式 <div> 
<div id=rel> 此層應用position：relative;bottom：30px;樣式 </div> 
<div id=abs> 此層只應用position：absolute;bottom：30px;樣式 </div> 

</div> 

</body>
以上代碼：

id爲rel的層會上移並與id爲sss的層重疊
id爲abs的層會以窗口爲基線，移至距離窗口30像素的位置！

四、在結合top、bottom、right、left等屬性時，若是想absolute（絕對定位）能以父層作爲定位基線的話，則在父層應用absolute或relativ屬性就能夠!以下：

<body> 

<div id=posi style=」position：relative」> 

<div id=rel> 此層應用position：relative;bottom：30px;樣式 </div> 
<div id=abs> 此層只應用position：absolute;bottom：30px;樣式 </div> 

</div> 

</body>

以上代碼：id爲posi的層，也能夠用absolute屬性！
id爲rel的層，不受影響，以自身的佔位爲基線作偏移！

id爲abs的層是以id爲posi層的底邊作爲定位基線，若是此時posi層的高度小於30px的話，abs層可能沒辦法看到哦！

轉自：http://www.rccoder.net/webpre/940.html