層的相對定位和絕對定位
想熟悉層的定位,需先了解兩個屬性:position:relative和position:absolute。兩者最大區(qū)別就是使用position:relative的層不可層疊,它只能相對于某個元素進行定位,如層對層定位,層對表格定位等;而position:absolute則是可層疊的,既可對于某個元素進行定位,也可以對于瀏覽器的邊緣進行絕對定位。
用法:
<td>
<div id="layer" style="position:relative;left:10px;top:10px;">
內(nèi)容……
</div>
</td>
這個層是對于表格TD進行定位,如果TD的位置變,這個層也會跟著變,但層與表格TD的相對位置不變,永遠都是距離TD左邊10個像素,距離TD頂部10像素。
<td>
<div id="layer" style="position:absolute; left:10px;top:10px;">
內(nèi)容……
</div>
</td>
這個層則是針對瀏覽器邊緣進行定位了,不受表格TD的位置影響,永遠都是距離瀏覽器左邊10個像素,距離瀏覽器頂部10個像素。
<td style="position:relative">
<div id="layer" style="position:absolute;margin-left:-10px; margin-top:-10px;">
內(nèi)容……
</div>
</td>
這個層則是針對表格TD進行定位了,但層的位置是層疊于表格TD之上的,位置在超過TD左邊的10個像素,超過TD頂部的10個像素,看起來就層疊了。這是position:absolute所特有的屬性,如改用position:relative這個則沒有層疊現(xiàn)象,位置是在TD的最左邊和最頂部了。
本文相對定位是以表格TD進行描述的,在實際應(yīng)用中可以是DIV層,也可以是其他一些標(biāo)簽元素如span,font等。另外應(yīng)用中position:relative和position:absolute這兩個屬性是經(jīng);熘玫摹