层的相对定位和绝对定位

发布日期：[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这两个属性是经常混着用的。