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

創(chuàng)新互聯(lián)公司是專業(yè)的鎮(zhèn)坪網(wǎng)站建設(shè)公司，鎮(zhèn)坪接單;提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行鎮(zhèn)坪網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

1.什么是定位：

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

2.各個(gè)屬性值的描述：

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

3.各個(gè)屬性值的具體作用：

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

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

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

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

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

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

圖一：

圖二：

圖三：

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

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

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

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

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

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

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

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

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

以上是“CSS中如何定位布局”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：CSS中如何定位布局-創(chuàng)新互聯(lián)
鏈接分享：http://weahome.cn/article/hpsop.html