Float text over image within table cell

I am trying to float text over an image in the 3rd column of the first row within a table. This cell has an <img> within it (processed by psd slicing) and I want to put text over it. I have tried float: left and position: absolute but nothing seems to work.

Any ideas?开发者_开发知识库

position:absolute in combination with a z-index should work.

If it is possible in your design, you can also use the image as the background of the table cell and just put the text as its contents.

Edit: Also see this question about a problem I had in only IE with text on top of an image.

Although I also recommend the canonical approach (putting the image as a background), here's a solution that does it just with positioning:

<td style="position:relative;">
    <img src="..." style="position:absolute;z-index:1;" />
    <div style="z-index:2;position:relative;">your text goes here</div>
</td>

You may find it useful for further reference.