CSS裡有一個非常重要的屬性,就是position,善用它,將無往而不利。
主要目的是在做定位,共有四種可選:static、fixed、relative、absolute,以下就依這四個屬性值來稍做解釋。
先來一個簡單的HTML範例代碼:
this is p1
this is p center
this is p2
很容易地,以上html就是呈現出下圖:
1、static
所有的html預設定位都是static,也就是依網頁原本的流向,不做任何變動。所以其實以上面原來的範例來說,
將某個html的元素,postion設定成fixed,即
然後隨意新增網頁內容至有捲軸出現為止,試著移動捲軸看看,會發現
若某個html元素設定成
顯示如下圖,往下挪了10px,但並不影響其它周圍元素的位置(可將top改成用margin-top看其差異喔):
將某個html設定
經由以上CSS的設定後,如圖(且發現”this is p2″會往上移了):
哈,相信這樣應該對position已經不會太陌生了,現在就是練習練習再練習了。
參考資料:其實都是
position:static;
。
2、fixed:鎖定定位
position:fixed;
,是表示此html是固定在視窗畫面上,即使畫面捲軸移動,該特定元素還是會定在畫面上。例:將.theDiv改成以下:
.theDiv{
border:1px solid black;
width:200px;
position:fixed; /*新增這行*/
}
3、relative:相對定位
position:relative;
,則表示可以使用top
、bottom
、left
、right
這四種屬性,來針對原來位置做移動,且不影響周圍其它元素的位置。例將.theP
改成以下:
.theP{
background-color: #b1b1b1;
border:1px solid black;
width:100px;
position:relative; /*新增這行*/
top:10px; /*新增這行*/
}
4、absolute:絕對定位
position:absolute;
,則表示此元素已脫離網頁原先流向,它會去找上層有設position:relative;
的元素,再搭配top
、bottom
、left
、right
來對此元素做定位。例如將.theDiv及.theP分別改設成以下:
.theDiv{
border:1px solid black;
width:200px;
position:relative; /*新增這行*/
}
.theP{
background-color: #b1b1b1;
border:1px solid black;
width:100px;
position:absolute; /*新增這行:採絕對定位*/
top:0; /*新增這行:往上層找到relative之後,距離上邊界為0px*/
right:10px; /*新增這行:往上層找到relative之後,距離右邊界為10px*/
}
htmldog:Page Layout