Div+CSS对HTML的table表格定位用法实例

关于css定位有很多文章讲述：

如果有一个元素div ，他的position属性设置为absolute，那么这个div 的位置取决于其父元素中position值设置为relative的元素。如果在其父元素中没有一个元素的position值是relative、absolute、或者fixed，那么这个div位置将以 body位置为参考。

但是对于某些浏览器来说似乎不是每个元素都遵从这一规则，有如下一段代码

1. table{     
2.     margin-left: 100px;     
3.     margin-top: 50px;     
4. }     
5. td{     
6.     height: 150px;     
7.     width: 100px;     
8.     position: relative;     
9. }     
10. td div{     
11.     height: 30px;     
12.     width: 50px;     
13.     background-color: red;     
14.     position: absolute;     
15.     left: 10px;     
16.     top:50px;     
17. }     
18. <table border="1">     
19.     <tr>     
20.         <td></td>     
21.         <td></td>     
22.         <td>     
23.             <div>这是一个position：absolute元素</div>     
24.         </td>     
25.     </tr>     
26. </table>    

由于div元素的尺寸较小，理想的情况是div总是在最后一个td中，但是在firefox中div并不以td为参考，而是body。
所以要实现这个效果的兼容方式是在td中添加一个能应用position：relative的元素，上述代码可以更改为

1. <table border="1">     
2.     <tr>     
3.         <td></td>     
4.         <td></td>     
5.         <td>     
6.                       <div style="position:relative;"     
7.             <div>这是一个position：absolute元素</div>     
8.                       </div>     
9.         </td>     
10.     </tr>     
11. </table>    

这样就可以保证 div元素始终在td中。

table的td相对定位实例
下面我们来看一个处理td相对定位的实例，这里我们建两个table样式：table和table2