如何應用CSS中position屬性

來源:酷知科普網 1.01W

本文主要是簡單的講解下如何應用css position的各個屬性的內容,以及如何應用。

操作方法

(01)首先,我們先簡單瞭解下position的幾個屬性:static (預設值),relative (相對定位),absolute (絕對定位), fixed(固定定位)。小編將會在具體的例項中講解...

如何應用CSS中position屬性

(02)relative(相對佈局):首先在CSS樣式中建立一個方塊,新增relative屬性,然後根據位置從而理解。

如何應用CSS中position屬性 第2張

(03)如圖所示,數字是在圖片的下方,也就是按照正常的從上到下佈局,也會依據top,right,bottom,left等屬性偏移相應的位置。

如何應用CSS中position屬性 第3張

(04)absolute (絕對定位):瞭解了相對佈局後,再看絕對定位,如圖所示,數字在圖片的下面,從頂上開始,也就是說圖片脫離正常文件的佈局,absolute也可以設定偏移量,使用top,right,bottom,left等屬性便可。

如何應用CSS中position屬性 第4張

(05)static (預設值):無特殊定位,與relative相似,區別在於不能進行移動,也就是說top,right,bottom,left等屬性不會被應用。

如何應用CSS中position屬性 第5張

(06)fixed(固定定位):這是一個很有趣的屬性,它是固定在那一個位置,哪怕出現滾動條時,它都不會隨之滾動。舉個例子,最常見的就是廣告,right,bottom,left等屬性對其有效。(仔細看下面2張圖的數字以及滾動條就能理解)

如何應用CSS中position屬性 第6張
如何應用CSS中position屬性 第7張
熱門標籤