CSS image positioning issue

I need to have numerous images overlap exactly on top of one another at the upper left corner of a frame cell.

When I use absolute positioning, the image is not where it is supposed to be in relation to the table cell.

Relative works, but I cannot seem to overlay the images, as adding images via relative layers just acts as if the images are not in layers at all (i.e. they take up the same space that they would in a normal flowing page)

Is there any way I can make the images be placed relative to the corner of the table cell?

I'm somewhat new to layers, so any help would be greatly appreciated.

Here is example code


<TABLE WIDTH=500 HEIGHT=500 BORDER=0>
<TR>
<TD width=300 height=100>

Need image1 to go in this cell, as well as image2, image3, and image4. All need to overlap perfectly in relation to the constraints of this table cell.

Here is the code I use in the cell for the first 2 layers which just flow one under the other- yet I need them to overlap.

<div id="Layer1" style="position:relative; width:518px; height:322px; z-index:1; visibility: visible;"><img src="images/Map2.gif" usemap="#Map" border=0></div>
<div id="Layer2" style="position:relative; width:518px; height:322px; z-index:2; visibility: hidden;"><img src="images/iloverlay.gif" usemap="#Map" border=0></div>

</TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
<table>

Relative positioned elements are in the flow, whille absolute positioned elements are not. For some very good explanations, read the articles at /*PIE*/. A minimum test case of what you're describing;You can control which pic is on top/visible by manipulating the z-index or display: none/block. If you use visibility: hidden/visible, you will still have z-index concerns.

cheers,

gary