如何让表格与图像重叠?

时间:2011-05-11 17:01:47

标签: html css image html-table overlap

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

但它不起作用:

enter image description here

如您所见,图像仍位于table之上 - 不是我想要的。请注意,在我的CSS中,我已明确将表格z-index设置为1,但它仍然不会与图像重叠。我做错了什么?

jsFiddle: http://jsfiddle.net/george_edison/uk7Pz/

1 个答案:

答案 0 :(得分:3)

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