層的相對(duì)定位和絕對(duì)定位

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

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

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

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

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

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