Html 如何使表格与图像重叠？

以下是我的HTML的一个小片段：

<img src="http://hss.fullerton.edu/philosophy/Red%20Square.gif" id="test1" />
<table id="test2">
    <tr><td>Test</td></tr>
</table>

但是，它不起作用：

如您所见，图像仍然位于

表的顶部

——这不是我想要的。请注意，在我的CSS中，我明确地将表的

z-index

设置为

1

，并且它仍然不会与图像重叠。我做错了什么

---

jsiddle:

尝试定位每个元素。向每个元素添加

position:relative

，如下所示：

我认为z-index只适用于定位元素。如果您给出表

位置：relative

，它可能会起作用，但也可能不起作用。@sdleihssirhc是正确的。你应该把它作为一个答案，这样你就可以为它赢得荣誉。是的，它是有效的。艾克特：我会把它作为一个答案，但我不知道它在IE6中是否有效（你可能需要

zoom:1

或其他什么…谁知道），而我现在没有访问它的权限。真的吗？您接受了@sdleihsirhc的评论回答，并试图因此获得好评@Blender不完全，他实际上包括了一个JSFIDLE样本，证明它确实有效。@Blender一点也不。我只是读了问题，然后贴出了我的答案。我以前遇到过这个问题，并且已经知道了答案。我不是有意偷@sdleihsirhc的任何作品。@Blender我无法决定是在这里进行讽刺还是严肃的回应。：）@Blender：与网站的其他部分一样，它是在CC wiki下授权的：）

#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;
}