如何讓桌子重疊圖像？

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/