層的相對定位和絕對定位

發布日期：[2009/11/24] 編輯：奇億廣州網站建設

想熟悉層的定位，需先了解兩個屬性：position:relative和position:absolute。兩者最大區別就是使用position:relative的層不可層疊，它只能相對于某個元素進行定位，如層對層定位，層對表格定位等；而position:absolute則是可層疊的，既可對于某個元素進行定位，也可以對于瀏覽器的邊緣進行絕對定位。

用法：
<td>
<div id="layer" style="position:relative;left:10px;top:10px;">
內容……
</div>
</td>
這個層是對于表格TD進行定位，如果TD的位置變，這個層也會跟著變，但層與表格TD的相對位置不變，永遠都是距離TD左邊10個像素，距離TD頂部10像素。

<td>
<div id="layer" style="position:absolute; left:10px;top:10px;">
內容……
</div>
</td>
這個層則是針對瀏覽器邊緣進行定位了，不受表格TD的位置影響，永遠都是距離瀏覽器左邊10個像素，距離瀏覽器頂部10個像素。

<td style="position:relative">
<div id="layer" style="position:absolute;margin-left:-10px; margin-top:-10px;">
內容……
</div>
</td>
這個層則是針對表格TD進行定位了，但層的位置是層疊于表格TD之上的，位置在超過TD左邊的10個像素，超過TD頂部的10個像素，看起來就層疊了。這是position:absolute所特有的屬性，如改用position:relative這個則沒有層疊現象，位置是在TD的最左邊和最頂部了。

本文相對定位是以表格TD進行描述的，在實際應用中可以是DIV層，也可以是其他一些標簽元素如span,font等。另外應用中position:relative和position:absolute這兩個屬性是經常混著用的。