Placing more IMGs at the same place

[Jhd.Honza]

Hi,
I have three images and I need to place them over themselves. The problem is I don't know their coordinates on the screen during design time, so I can't use TOP and LEFT properties. The POSITION: ABSOLUTE itself is quite near to the situation I need to get, but I really need the pictures to fit pixel to pixel.

I was wondering if I could somehow use POSITION: RELATIVE, because the pictures are in a table cell, so I know they are all e.g. two pixels from the cell corner.

Any other idea?
Thanks,
John

[Rick Bull]

You should be able to combine relative and absolute potitioning, by making the parent block relative, then the images absolute:

<div style="position: relative; left: 0px; top: 0px;">
  <img src="image1.png" alt=Image1" style="position: absolute; left: 0px; top: 0px; />
  <img src="image2.png" alt=Image2" style="position: absolute; left: 0px; top: 0px; />
  <img src="image3.png" alt=Image3" style="position: absolute; left: 0px; top: 0px; />
</div>

I'm not sure of browser support, but I think it works in most browsers. Also I'm not sure whether you need the top and left on the DIV, but it does no harm to leave it there anyway.

The other alternative is to use background images with style:

<div style="background: transparent url('image1.png') top left no-repeat;">
  <img style="background: transparent url('image2.png') top left no-repeat;" src="image3.png" alt="" />
</div>

You may need to play with the margins and padding of both the DIV and image for that one (i.e. setting them to 0px).