How to get a table to overlap an image?

Here is a small snippet of my HTML:

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

I have an image of a red square and I want the table to overlap the bottom of it. Here is the 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;
}

It isn't working, however:

As you can see, the image is still on top of the table - not what I want. Notice in my C开发者_如何学JAVASS that I've explicitly set the table's z-index to 1 and it still won't overlap the image. What am I doing wrong?

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

Try positioning each element. Add position:relative to each element, as demonstrated here: http://jsfiddle.net/8nGKk/1/