文章目錄

• • 1.什么是定位：
  • 2.各個屬性值的描述：
  • 3.各個屬性值的具體作用：
  • 4.定位布局技巧：position：relative 與 position：absolute 結合使用:

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都是一種布局方式，且各有各的應用場景，可以根據需求來選擇布局方式。

總結

以上是生活随笔為你收集整理的CSS之定位布局（position，relative定位布局技巧）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。