css怎麼進行定位

css進行定位的方法：首先使用position屬性指定元素的定位類型（靜態定位、絕對定位、相對定位或固定定位）；然後使用left，top，right，bottom屬性調整元素的位置即可。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

什麼是定位：

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

各個屬性值的描述：

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

各個屬性值的具體功能：

#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：(固定定位),不會隨著頁面滾動而滾動，這裡就不貼圖了，最形象的就是那些網頁小廣告，你捲動頁面，但是它一直在網頁的右邊或左邊，死跟著你。

定位佈局技巧：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開始整個頁面來量取像素，同時也方便管理，結構清晰。

（學習影片分享：css影片教學）

以上是css怎麼進行定位的詳細內容。更多資訊請關注PHP中文網其他相關文章！