June 11th, 2013, 11:47 AM
[RESOLVED] Positioning of images one on top of another
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:
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?
<div id='summary' class='ui-corner-all ui-widget'>
<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" />
Click Here to Expand Forum to Full Width