CSS中最常用的佈局類別屬性,一個是Float( CSS浮動屬性Float詳解),另一個是CSS定位屬性Position。
1. position:static
所有元素的預設定位都是:position:static,這表示元素沒有被定位,而且在文件中出現在它應該在的位置。
一般來說,不用指定position:static,除非想要覆寫先前設定的定位。
#div-1 {
position:static;
}
2. position:relative
如果設定position:relative,就可以使用top,bottom,left 和right 來相對於元素在文件中應該出現的位置來移動這個元素。 【意思是元素其實仍佔據文檔中的原有位置,只是視覺上相對於它在文檔中的原有位置移動了】
#div-1 {
position:relative;
top:20px;
left:-40px;
}
3. position:absolute
當指定position:absolute 時,元素就脫離了文件【即在文件中已經不佔據位置了】,可以準確的按照設定的top,bottom,left 和right 來定位了。
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}