層的相對定位和絕對定位

發(fā)布日期：[2009/11/24] 編輯：奇億廣州網(wǎng)站建設

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

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

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

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

本文相對定位是以表格TD進(jìn)行描述的，在實(shí)際應用中可以是DIV層，也可以是其他一些標簽元素如span,font等。另外應用中position:relative和position:absolute這兩個(gè)屬性是經(jīng)�；熘�(zhù)用的。