在一个表格中显示两个重叠的div

表格用的是相对宽度,所以没办法设置position:absolute,只能用相对的位置来表示。现在发现,如果两个层都用position:relative,设置同样的位置,不同的z-index值,还是会一上一下的,不能重叠,办法实现如下:

<table align=center width=100%>
<tr>
<td align=center>
<div id="layer3" style="position:relative; left:0; top:0; z-index:1; width:200; height:200; background-color:#CC00FF; ">
 <div id="layer1" style=" position:absolute; left:0px; top:0px;  z-index:3; width:100; height:100; background-color:#CCCCCC ">a</div>
 <div id="layer2" style=" position:absolute; left: 0px; top: 0px; z-index:2; height:150; width:50; background-color:#00FF66">b</div>
</div>
</td></tr></table>

后面两个DIV不会重叠,你可以将浏览器的视图放大或缩小试试看。

z-index可以重叠的,只不过position设置问题