CSS之定位佈局

CSS 讀社會 2017-05-10

css之定位

1.什麼是定位:

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

2.各個屬性值的描述:

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

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

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

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

圖一:對child-1 設置了position:relative

CSS之定位佈局

圖二:再對child-1 調位置 top:20px left:20px

CSS之定位佈局

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

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

圖一:

CSS之定位佈局

圖二:

圖三:

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

4.定位佈局技巧:position:relative 與 position:absolute 結合使用:

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

圖一:初始狀態

CSS之定位佈局

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

CSS之定位佈局

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

CSS之定位佈局

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

CSS之定位佈局

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

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

總結:上一篇寫了float的佈局技巧,這章是position,可以看出position與float都是一種佈局方式,且各有各的應用場景,可以根據需求來選擇佈局方式。

作者:Ry-yuan

如需轉載請標明出處,原文地址:http://www.cnblogs.com/Ry-yuan/p/6822619.html

相關推薦

推薦中...