CSS之定位佈局（position，定位佈局技巧）

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

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

C.absolute: (絕對定位)，徹底脫離文本流（普通流），原來的位置再也不佔有，且能夠設置TLBR任意移動；

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

圖一：

圖二：

圖三：

 

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

 

 

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

上面提到若是對元素設置了absolute後，其父級元素都沒有設置position：relative，其會以body爲父級。這樣的話咱們該元素定位到咱們的目標位置將很困難，量像素麻煩。圖片說明：

圖一：初始狀態

圖二：對box-chd-chd設置position：absolute 並設置 top：0， left:0 能夠看到它從body做爲父級，會以最左上角做爲起點

圖三：對box 設置position：relative，能夠看到此時box-chd-chd以box做爲父級

圖四：再對box-chd 設置position：relative，能夠看到box-chd-chd以box-chd做爲父級

 

能夠看出，當子代設置了position：absolute後，其父級那個設置了position：relative，這個子代就會從該父級元素最左上方做爲起點移動，而且遵循 就近原則，即子代向上找父級，當找到第一個有父級設置了relative就以它最左上方做爲起點。

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

 

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

做者：Ry-yuan

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