1元素的定位屬性

製作網頁時，如果希望元素出現在某個特定的位置，就需要使用定位屬性對元素進行確定位。元素的定位就是將元素放置在頁面的指定位置，主要包括定位模式和邊偏移兩部分。

1.1定位模式

在CSS中， position屬性用於定義元素的定位模式，其基本語法格式如下。
選擇器{ position:屬性值;}

在上面的語法中，position屬性常用值有四個，分別表示不同的定位模式，具體如下表。

從表中可以看出，定位的方法有多種，分別為靜態定位( statc)、相對定位( relative)、絕對定位( absolute)及固定定位（fxed),後面將對它們進行詳細講解。

1.2邊偏移

定位模式( position)僅僅用於定義元素以哪種方式定位，並不能確定元素的具體位置。在CSs中，通過邊偏移屬性top、 bottom、left或right來精確定義定位元素的位置，具體解釋如下：

從表中可以看出，邊偏移可以通過top、bottom、left、right進行設定，其取值為不同單位的數值或百分比，示例如下：

position：relative；　　/*相對定位*/
left：50px；　　　　　　/*距左邊線50px*/
top：10px；　　　　　　/*距上邊線10px*/

2.靜態定位 static

靜態定位是元素的預設定位方式，當 position屬性的取值為static時，可以將元素定位於靜態位置。所謂靜態位置就是各個元素在HTML文件流中預設的位置。

任何元素在預設狀態下都會以靜態定位來確定自己的位置，所以當沒有定義 position屬性時，並不說明該元素沒有自己的位置，它會遵循預設值顯示為靜態位置。在靜態定位狀態下無法通過邊偏移屬性(top、 bottom、left或 right)來改變元素的位置。

3 相對定位relative

相對定位是將元素相對於它在標準文件流中的位置進行定位，當 position屬性的取值為relative時，可以將元素定位於相對位置。對元素設定相對定位後，可以通過邊偏移屬性改變元素的位置，但是它在文件流中的位置仍然保留。

下面演示一個例子：

效果：

4 絕對定位 absolute

絕對定位是將元素依據最近的已經定位(絕對、固定或相對定位)的父元素進行定位，若所有父元素都沒有定位，則依據body根元素（瀏覽器視窗）進行定位。當 position屬性的取值為 absolute時，可以將元素的定位模式設定為絕對定位。
下面在上例的基礎上，將 child-02的定位模式設定為絕對定位，即將.child02程式碼更改如下。

效果圖：

在圖中，設定為絕對定位的元素 child02,依據瀏覽器視窗進行定位。並且，這時child03佔據了 child02的位置，即 child2脫離了標準文件流的控制，不再佔據標準文件流中的空間。

在上面的案例中，對 child02設定了絕對定位，當瀏覽器視窗放大或縮小時， child02相對於其直接父元素的位置都將發生變化。當縮小瀏覽器視窗時，頁面將呈現下圖所示效果：

很明顯 child02相對於其直接父元素的位置發生了變化。

然而在網頁中，一般需要子元素相對於其直接父元素的位置保持不變，即子元素依據其直接父元素絕對定位，如果直接父元素不需要定位，該怎麼辦呢？

對於上述情況，可將直接父元素設定為相對定位，但不對其設定偏移量，然後再對子元素應用絕對定位，並通過偏移屬性對其進行精確定位。這樣父元素既不會失去其空間，同時還能保證子元素依據直接父元素準確定位。

下面通過一個案例來演示子元素依據其直接父元素準確定位的方法：

效果圖：

注意：

(1)如果僅設定絕對定位，不設定邊偏移，則元素的位置不變，但其不再佔用標準文件流中的空間，與上移的後續元素重疊。

(2)定義多個邊偏移屬性時，如果left和 right衝突，以left為準，top和bottom衝突，以top為準

5 固定定位

元素的位置相對於瀏覽器視窗是固定位置。即使視窗是滾動的它也不會移動。

注意：

Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支援。

Fixed定位使元素的位置與文件流無關，因此不佔據空間。

Fixed定位的元素和其他元素重疊。

6 z-index 層疊等級屬性

z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

注意：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！

效果圖：