9. CSS的位置控制

一、用position來控制元件位置

1. position:static「靜態」這是網頁的預設值。
2. position:relative 「相對」指的是相對他原來所在的位置（下一個元素並不會隨之起舞），可用 top、bottom、left、right來調整該元素位置。
3. position:absolute「絕對」指的是相對於整個網頁最左上角的位置（此元素會飄起來，下一個元素會當作它不存在一樣遞補其位置），一樣可用top、bottom、 left、right來調整該元素位置。
4. position:absolute搭配z-index，可以將元素進行上下排列。一般而言，z-index預設值為0。
5. position:fixed「固定」指的是相對於整個視窗最左上角的位置（此元素也會飄起來，下一個元素一樣當作它不存在而遞補其位置），可用top、bottom、 left、right來調整該元素位置，不管視窗如何捲動，永遠保持在固定位置（可用來做浮動視窗）。要注意的是該死的IE6要使用!DOCTYPE 聲明指定standards-compliant（標準）模式才能正常使用。

二、position:relative + position:absolute

1. 當position:relative包著position:absolute的時候，後者就會改以前者的位置危基準，而非整個視窗。

三、兩欄式（或三欄）

1. 將b設為relative寬度為960。b1、b2、b3均設為absolute，寬度均為320px。
2. 將b1設為「left:0px; top:0px;」，b2設為「left:320px;top:0px;」，b3設為「right:0px; top:0px;」

四、浮動float

1. b1、b2、b3的位置均不設，寬度均為320px，然後均設為float:left，一樣可達成分欄位效果。
2. 配合 clear:both; 可以將浮動效果清除掉。

五、練習範例：

<div id='a' class='big'>a</div>
<div id='b' class='big'>b
<div id='b1'>b1</div>
<div id='b2'>b2</div>
<div id='b3'>b3</div>
</div>
<div id='c' class='big'>c</div>

 參考資源1：http://www.w3schools.com/css/pr_list-style-type.asp

 參考資源2：http://www.w3school.com.cn/css/css_reference.asp