Tad 教材網 - 線上書籍

:::

\[1001\]XOOPS網站門面專業設計
=====================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1001/09.pdf)

### 一、用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; 可以將浮動效果清除掉。
 
### 五、練習範例：

參考資源1：[http://www.w3schools.com/css/pr\_list-style-type.asp](http://www.w3schools.com/css/pr_list-style-type.asp)

參考資源2：[http://www.w3school.com.cn/css/css\_reference.asp](http://www.w3school.com.cn/css/css_reference.asp)

:::