以下是我的HTML的一小段内容:
<img src="http://hss.fullerton.edu/philosophy/Red%20Square.gif" id="test1" />
<table id="test2">
<tr><td>Test</td></tr>
</table>
我有一个红色正方形的图像,我希望桌子与它的底部重叠。这是CSS:
#test1 {
width: 42px;
height: 42px;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: -15px;
}
#test2 {
z-index: 1;
background-color: pink;
width: 80px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
但它不起作用:
如您所见,图像仍位于table
之上 - 不是我想要的。请注意,在我的CSS中,我已明确将表格z-index
设置为1
,但它仍然不会与图像重叠。我做错了什么?
jsFiddle: http://jsfiddle.net/george_edison/uk7Pz/