I'm looking for some help with image positioning because I don't think this is the right way to do it.
I have a parent DIV, absolutely positioned, that is later moved by jQuery to another part of the page. Inside this DIV I want multiple transparent PNGs, overlaid one on top of another, to give an onion skin effect. I have it working but it doesn't look right because I'm doing a lot of silly offset positioning (needless to say CSS is not my bag).
Here's what I have:
<div id='summary' class='ui-corner-all ui-widget'>
	<div class='ui-state-default'>Summary</div>
	<a style='text-align:left;'id='txtSummary'></a>
	<a>Cost<span id='txtEstCost' class='ui-state-active'></span></a><br/><br/>
	<img style="z-index:10;"   id="img1" src="images/image1.png" />
	<img style="position: relative; top: -123px; z-index:11;" id="img2"   src="images/image2.png" />
	<img style="position: relative; top: -248px; left: -2px; z-index:12;" id="img3"   src="images/img3.png" />
How do I place one image on top of another without the position changing, so that the origin of each is from the same location?