How to put text over an image without absolute positioning or setting the image as backbround

I used to pull stunts like this all the time as soon as tables came. Really ugly, and may seriously embarrass any validator you run it trough: overlapping table cells. Works in most browsers though and even without css.

Example:

<table>  
  <tr>
    <td></td>
    <td rowspan=2><img src="//i.stack.imgur.com/XlOi4.png"></td>
  </tr>  
  <tr>
    <td colspan=2>This is the overlay text</td>
  </tr>  
</table>

I know, I deserve a downvote for this.

If you use absolute positioning, you should specify both the left and top attributes. Also, you should set position:relative; on some parent element to make it a layer, so that the absolute positioning uses that element as origin. If you don't specify the origin, it may be the window or it may be some other element, and you don't know where your absolutely positioned element will end up.

There are some other alternatives to place elements on top of each other, each with their own limitations.

You can use relative positioning to make text display on top of an image:

<img src="..." alt="" />
<div style="position:relative;top:-50px;">
   This text will display 50 pixels higher than it's original position,
   placing it on top of the image. However, the text will still take up
   room in it's original position, leaving an empty space below the image.
</div>

You can use a floating element inside another element to put text on top of an image:

<div>
   <div style="float:left;">
      This text will be on top of the image. The parent element
      gets no height, as it only contains floating elements.
      However, IE7 and earlier has a bug that gives the parent
      element a height anyway.
   </div>
</div>
<img src="..." alt="" />

The best way to control the look of things would be to make the text part of the image itself. Of course, if you use a lossy image format like jpeg with high compression it could look really bad, but maybe a PNG will work for you? Or, depending on the number of colors, a gif might work.

This also gives you consistent-looking fonts, filtering, etc.