亚洲国产视频在线,亚洲精品国产九九九,精品一区二区三区久久久

主頁 > 知識庫 > css position: absolute、relative詳解

css position: absolute、relative詳解

CSS2.0 HandBook上的解釋：

設(shè)置此屬性值為 absolute 會將對象拖離出正常的文檔流絕對定位而不考慮它周圍內(nèi)容的布局。假如其他具有不同 z-index 屬性的對象已經(jīng)占據(jù)了給定的位置，他們之間不會相互影響，而會在同一位置層疊。此時對象不具有外補丁( margin )，但仍有內(nèi)補丁( padding )和邊框( border )。
要激活對象的絕對(absolute)定位，必須指定 left ， right ， top ， bottom 屬性中的至少一個，并且設(shè)置此屬性值為 absolute 。否則上述屬性會使用他們的默認(rèn)值 auto ，這將導(dǎo)致對象遵從正常的HTML布局規(guī)則，在前一個對象之后立即被呈遞。

TRBL屬性（TOP、RIGHT、BOTTOM、LEFT）只有當(dāng)設(shè)定了position屬性才有效。
當(dāng)設(shè)定position:absolute
如果父級（無限）沒有設(shè)定position屬性，那么當(dāng)前的absolute則結(jié)合TRBL屬性以瀏覽器左上角為原始點進行定位
如果父級（無限）設(shè)定position屬性，那么當(dāng)前的absolute則結(jié)合TRBL屬性以父級（最近）的左上角為原始點進行定位。

當(dāng)設(shè)定position: relative
則參照父級（最近）的內(nèi)容區(qū)的左上角為原始點結(jié)合TRBL屬性進行定位（或者說相對于被定位元素在父級內(nèi)容區(qū)中的上一個元素進行偏移），無父級則以BODY的左上角為原始點。相對定位是不能層疊的。在使用相對定位時，無論元素是否進行移動，元素依然占據(jù)原來的空間。因此，移動元素會導(dǎo)致它覆蓋其他框。

一般來講，網(wǎng)頁居中的話用Absolute就容易出錯，因為網(wǎng)頁一直是隨著分辨率的大小自動適應(yīng)的，而Absolute則會以瀏覽器的左上角為原始點，不會應(yīng)為分辨率的變化而變化位置。有時還需要依靠z-index來設(shè)定容器的上下關(guān)系，數(shù)值越大越在最上面，數(shù)值范圍是自然數(shù)。當(dāng)然有一點要注意，父子關(guān)系是無法用z-index來設(shè)定上下關(guān)系的，一定是子級在上父級在下。

設(shè)置此屬性值為 relative 會保持對象在正常的HTML流中，但是它的位置可以根據(jù)它的前一個對象進行偏移。在相對(relative)定位對象之后的文本或?qū)ο笳加兴麄冏约旱目臻g而不會覆蓋被定位對象的自然空間。與此不同的，在絕對(absolute)定位對象之后的文本或?qū)ο笤诒欢ㄎ粚ο蟊煌想x正常文檔流之前會占有它的自然空間。放置絕對(absolute)定位對象在可視區(qū)域之外會導(dǎo)致滾動條出現(xiàn)。而放置相對(relative)定位對象在可視區(qū)域之外，滾動條不會出現(xiàn)。其實對于定位的主要問題是要記住每個定位的意義。相對定位是“相對于“元素在文檔流中初始位置的，而絕對定位是”相對于“最近的已經(jīng)定位的祖先元素。

以下是補充：

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

總結(jié)如下：

先看下面這一個層結(jié)構(gòu)

body>

div id=posi>

div id=rel> 此層只應(yīng)用position：relative;樣式 /div>
div id=abs> 此層只應(yīng)用position：absolute;樣式 /div>
div id=sss> 不應(yīng)用樣式 div>

/div>

/body>

1、absolute：不占位、relative：有占位！

如上層結(jié)構(gòu):

id為rel的層在顯示時，會占用一行！其后面的abs層只會在下一行顯示出來！
id為abs的層在顯示時，會與后面id為sss的重疊在一起！

2、默認(rèn)情況下（不結(jié)合top等來定位），absolute（絕對定位）以父層來定位的
如上面的id為abs的層，如果不結(jié)合top等來定位，則其顯示位置會隨父級posi層（posi在文檔左下角，其也會在左下角）

3、在結(jié)合top、bottom、right、left等屬性時，absolute（絕對定位）以窗口做為定位，relative以自身的占位為基線做偏移！如下：

body>

div id=posi>

div id=sss> 不應(yīng)用樣式 div>
div id=rel> 此層應(yīng)用position：relative;bottom：30px;樣式 /div>
div id=abs> 此層只應(yīng)用position：absolute;bottom：30px;樣式 /div>

/div>

/body>

以上代碼：
id為rel的層會上移并與id為sss的層重疊
id為abs的層會以窗口為基線，移至距離窗口30像素的位置！

4、在結(jié)合top、bottom、right、left等屬性時，如果想absolute（絕對定位）能以父層做為定位基線的話，則在父層應(yīng)用absolute或relativ屬性就可以!如下：

body>

div id=posi style=”position：relative”>

div id=rel> 此層應(yīng)用position：relative;bottom：30px;樣式 /div>
div id=abs> 此層只應(yīng)用position：absolute;bottom：30px;樣式 /div>

/div>

/body>

以上代碼：id為posi的層，也可以用absolute屬性！
id為rel的層，不受影響，以自身的占位為基線做偏移！

id為abs的層是以id為posi層的底邊做為定位基線，如果此時posi層的高度小于30px的話，abs層可能沒辦法看到哦！

您可能感興趣的文章:

淺談由position屬性引申的css進階討論
CSS中position屬性之fixed實現(xiàn)div居中
通過設(shè)置CSS中的position屬性來固定層的位置
詳細(xì)分析css float 屬性以及position:absolute 的區(qū)別
使用CSS樣式position:fixed水平滾動的方法
推薦深入理解css中的position定位和z-index屬性
詳解CSS不受控制的position fixed

標(biāo)簽：廣安混顯萊蕪邵陽鶴壁賀州貴州滄州

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《css position: absolute、relative詳解》，本文關(guān)鍵詞 css,position,absolute,relative,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

css position: absolute、relative詳解