首頁  >  文章  >  web前端  >  css怎麼進行定位

css怎麼進行定位

青灯夜游
青灯夜游原創
2021-04-29 18:36:5415189瀏覽

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

css怎麼進行定位

本教學操作環境: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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn