How to get a table to overlap the 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 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;
}

However, it does not work:

As you can see, the image is still on top table- not what I want. Please note that in my CSS I explicitly set the table z-indexto 1and still will not overlap the image. What am I doing wrong?

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