溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS中如何定位布局

發(fā)布時間:2021-03-22 09:34:03 來源:億速云 閱讀:118 作者:小新 欄目:web開發(fā)

這篇文章主要介紹CSS中如何定位布局,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!

1.什么是定位:

css中的position屬性,position有四個值:absolute/relative/fixed/static(絕對/相對/固定/靜態(tài)(默認(rèn)))通過定位屬性可以設(shè)置一些不規(guī)則的布局,使用TLBR(top,left,bottom,right)來調(diào)整元素位置。

2.各個屬性值的描述:

static(靜態(tài)) 沒有特別的設(shè)定,遵循基本的定位規(guī)定,不能通過z-index進(jìn)行層次分級,在普通流中,各個元素默認(rèn)的屬性。relative(相對定位) 對象不可層疊、不脫離文檔流,參考自身靜態(tài)位置通過 top,bottom,left,right 定位。absolute(絕對定位) 脫離文檔流,通過 top,bottom,left,right 定位。選取其最近一個最有定位設(shè)置的父級對象進(jìn)行絕對定位,如果對象的父級沒有設(shè)置定位屬性,absolute元素將以body坐標(biāo)原點進(jìn)行定位。fixed(固定定位) 這里所固定的參照對像是可視窗口而并非是body或是父級元素。使用了fixed的元素不會隨著窗口的滾動而滾動。屬于absolute的子集。

3.各個屬性值的具體作用:

A.static:(靜態(tài),默認(rèn)的屬性)通常情況下都不會使用,但是會存在有些場景,就是你想把position的值從其他值修改成默認(rèn)時使用。

B.relative:(相對定位)一個元素設(shè)定了position:relative,因為其不脫離文本流,如果不設(shè)置TLBR(top,left,bottom,right)的話,它的位置不會被改變,且不會影響當(dāng)前布局,相當(dāng)于沒事發(fā)生一樣。如果設(shè)置了TLBR后,元素就可以向指定的方向偏移,但是他原有的位置還是占據(jù)著的,例子如圖:

圖一:對child-1 設(shè)置了position:relative

CSS中如何定位布局

圖二:再對child-1 調(diào)位置 top:20px left:20px

CSS中如何定位布局

C.absolute: (絕對定位),完全脫離文本流(普通流),原來的位置不再占有,且可以設(shè)置TLBR任意移動;

特別說明一下,對元素設(shè)置了absolute后,其父級元素都沒有設(shè)置position:absolute/relative/fixed其會以body為父級。

圖一:

CSS中如何定位布局

圖二:

CSS中如何定位布局

圖三:

CSS中如何定位布局

D.fixed:(固定定位),不會隨著頁面滾動而滾動,這里就不貼圖了,最形象的就是那些網(wǎng)頁小廣告,你滾動頁面,但是它一直在網(wǎng)頁的右邊或左邊,死跟著你。

4.定位布局技巧:position:relative 與 position:absolute 結(jié)合使用:

上面提到如果對元素設(shè)置了absolute后,其父級元素都沒有設(shè)置position:relative,其會以body為父級。這樣的話我們該元素定位到我們的目標(biāo)位置將很困難,量像素麻煩。圖片說明:

圖一:初始狀態(tài)

CSS中如何定位布局

圖二:對box-chd-chd設(shè)置position:absolute 并設(shè)置 top:0, left:0 可以看到它從body作為父級,會以最左上角作為起點

CSS中如何定位布局

圖三:對box 設(shè)置position:relative,可以看到此時box-chd-chd以box作為父級

CSS中如何定位布局

圖四:再對box-chd 設(shè)置position:relative,可以看到box-chd-chd以box-chd作為父級

CSS中如何定位布局

可以看出,當(dāng)子代設(shè)置了position:absolute后,其父級那個設(shè)置了position:relative,這個子代就會從該父級元素最左上方作為起點移動,并且遵循就近原則,即子代向上找父級,當(dāng)找到第一個有父級設(shè)置了relative就以它最左上方作為起點。

relative 與 absolute 結(jié)合的方式,對定位布局起到了便利,需要移動的距離也得到縮小,不用從body開始整個頁面來量取像素,同時也方便管理,結(jié)構(gòu)清晰。

以上是“CSS中如何定位布局”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI