在上一篇Css Box Model討論完Element的大小問題，接來下來談談Element的位置(Position)問題，Css中可以對Element的Position屬性設置四種類型的值分別為static、relative、absolute、fixed。
Static
static為position的預設值，它會在頁面上佔據位置，但不能使用top right bottom left移動Element。請看看下面範例。
HTML
<div class="test1">Test1</div>
<div class="test2">Test2</div>
CSS
.test1 {
position:static;
background-color:red;
top:100px;
right:100px;
}
.test2 {
background-color:green;
}
從結果可看出Test1完全沒有移動，且有佔據位置，所以Test2會在Test1下面。
Relative
relative為相對定位，元素在頁面上佔據位置，可使用top right bottom left移動Element。
其中所謂的相對定位概念可以想成，一個元素設置成相對定位，然後可以設置它垂直或水平的位置，讓這個元素相對於原本位置進行移動，並且會保留原本位置的空間。如下圖框2的原本位置空間會保留。
HTML
<div class="test1">Test1</div>
<div class="test2">Test2</div>
CSS
.test1 {
position:relative;
background-color:red;
top:10px;
left:10px;
}
.test2 {
background-color:green;
}
從下圖可知Test1，向下位移了10px，並向右移10px，但注意Test1原本的空間位置還在喔。
Absolute
Absolute為絕對定位，相對於最近一級且不是static的父元素來進行定位。元素在頁面不占據位置，你可以想成他從頁面上浮起來，然後它移動的起使位置為父元素，可以使用top right bottom left移動元素位置，如下圖不會像相對定位一樣保留原本框2的空間與位置。
HTML
<div class="test1">Test1</div>
<div class="test2">Test2
<div class="test3">Test3</div>
</div>
CSS
.test1 {
height:30px;
background-color:red;
}
.test2 {
height:50px;
position:relative;
background-color:green;
}
.test3{
position:absolute;
top:0px;
left:50px;
}
Test3因為設定了absolute，所以他會依照Test3父的元素且position不為static的Test2的位置來進行位移。
而這時如果將test2的position修改為static結果會變成如下圖，因為沒有找到合適的父元素，所以他會定位最原始的區塊。
absolute 設置會修改屬性
當一個元素被設定為absolute會發生三件事。
- 把該元素往上浮了一層，元素脫離了原本文檔流，所以不在占據原本的空間，還會覆蓋下層的素。
- 該元素會變會
block level element也就是display:block，例如將一個span(inline level element)設成absoulte它就可以設置寬高了。
原本的
<span class="test">Hello Mark</span>
.test{
background-color:red;
width:100px;
height:100px;
}
將.test增加position:absolute;如下。
.test{
position:absolute;
background-color:red;
width:100px;
height:100px;
}
該元素如果是Block元素，元素的寬度由原來的width:100%，轉為auto。
<div class="test1">Test1</div>
.test1 {
height:30px;
background-color:red;
}
然後我們將test1增加position:absolute，然後會變成。
