如何让表格重叠图像？答案

【问题标题】：How to get a table to overlap an image?如何让表格重叠图像？
【发布时间】：2011-08-23 12:01:32
【问题描述】：

这是我的 HTML 的一个小 sn-p：

<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/

【问题讨论】：

我认为 z-index 仅适用于定位元素。如果你给桌子position:relative，它可能会起作用，但同样可能不会。
@sdleihssirhc 是对的。你应该把它作为一个答案，这样你就可以获得它的功劳。
是的，它适用于 AFAICT：jsfiddle.net/uk7Pz/1
我会把它作为一个答案，但我不知道它是否可以在 IE6 中工作（你可能需要 zoom:1 或其他什么......谁知道），我不知道现在可以访问它。

标签： html css image html-table overlap

【解决方案1】：

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

【讨论】：

真的吗？您接受了@sdleihssirhc 的评论答案并试图获得荣誉？ ...
@Blender 不完全是，他实际上包含了一个 JSFiddle 示例，证明它确实有效。
@Blender 一点也不。我刚刚阅读了这个问题并发布了我的答案。我以前遇到过这种情况，并且已经知道答案。我不是有意窃取任何@sdleihssirhc 的作品。
@Blender 我无法决定是讽刺还是严肃地回应。 :)
@Blender：它像网站的其他部分一样在 CC-wiki 下获得许可 :)