:::
8-2 上課範例：style2.css
9. CSS的位置控制
一、用position來控制元件位置
- position:static「靜態」這是網頁的預設值。
- position:relative 「相對」指的是相對他原來所在的位置（下一個元素並不會隨之起舞），可用 top、bottom、left、right來調整該元素位置。
- position:absolute「絕對」指的是相對於整個網頁最左上角的位置（此元素會飄起來，下一個元素會當作它不存在一樣遞補其位置），一樣可用top、bottom、 left、right來調整該元素位置。
- position:absolute搭配z-index，可以將元素進行上下排列。一般而言，z-index預設值為0。
- position:fixed「固定」指的是相對於整個視窗最左上角的位置（此元素也會飄起來，下一個元素一樣當作它不存在而遞補其位置），可用top、bottom、 left、right來調整該元素位置，不管視窗如何捲動，永遠保持在固定位置（可用來做浮動視窗）。要注意的是該死的IE6要使用!DOCTYPE 聲明指定standards-compliant（標準）模式才能正常使用。
二、position:relative + position:absolute
- 當position:relative包著position:absolute的時候，後者就會改以前者的位置危基準，而非整個視窗。
三、兩欄式（或三欄）
- 將b設為relative寬度為960。b1、b2、b3均設為absolute，寬度均為320px。
- 將b1設為「left:0px; top:0px;」，b2設為「left:320px;top:0px;」，b3設為「right:0px; top:0px;」
四、浮動float
- b1、b2、b3的位置均不設，寬度均為320px，然後均設為float:left，一樣可達成分欄位效果。
- 配合 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
