如何让表格与图像重叠？

Question

以下是我的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/

Answer 1

尝试定位每个元素。将position:relative添加到每个元素，如下所示：http://jsfiddle.net/8nGKk/1/