Roll the ball right into the pocket ... absolute positioning in a nutshell

Elaine had a very good question about positioning, to wit:

scenario: table with background image in a cell. Background image has an area pre-determined for overlaying text.

question: how to best set in the text so that it appears in the area determined for it?

answer: use absolute positioning within a div that is within a positioned div. Position, in this case, is an attribute and may be defined in a css style.

solution: don't bother with the table, it only confuses the situation, then

1. set up a div with a class or id defined with the attribute {position: ppp;} where ppp is relative, absolute, or fixed.
2. on this 'containing' div, set
   {background-image: [url];}
   and set the height and the width of the div to the dimensions of the image
   {width: xxx; height: yyy;}.
3. set a div inside the containing div with the following attributes:
    {width: [width of text area];
   height: [height of text area];
   top: [distance from top of div in pixels]px;
   left: [distance from left edge of div in pixels]px;
   position: absolute;}
4. By using a background image, the surface real-estate is still available for the text div to be positioned and populated with the desired text; the image will not push the new div out of the way.

Here's an example file:

http://www.gravenimagedesign.net/PAE/positiontest.html

If you really want to use a table, go ahead, but you will still need a containing div within the data cell and a positioned div within the containing div.

Don't forget to set position: relative|fixed|absolute (choices) on the containing div; use position: absolute on the positioned div. 

Fiddle around with negative numbers of pixels when you do the positioning (from top, from left; could do from right or from bottom; don't do more than 2) dimensions. Talk about working outside the box!

Have fun!