CodeGuru Forums - Scripting - Client Side http://forums.codeguru.com/ Discuss client-side scripting issues. Client-side scripting such as JavaScript, JScript, and VBScript as well as technologies such as HTML and stylesheets. en Thu, 20 Jun 2013 05:24:52 GMT vBulletin 60 http://forums.codeguru.com/images/misc/rss.png CodeGuru Forums - Scripting - Client Side http://forums.codeguru.com/ <![CDATA[CSS [RESOLVED] Positioning of images one on top of another]]> http://forums.codeguru.com/showthread.php?537723-RESOLVED-Positioning-of-images-one-on-top-of-another&goto=newpost Tue, 11 Jun 2013 16:47:38 GMT
Summary

Cost

--------- 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? Regards, Gary]]> 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:
Code:
<div id='summary' class='ui-corner-all ui-widget'>
        <div class='ui-state-default'>Summary</div>
        <a style='text-align:left;'id='txtSummary'></a>
        <br/>
        <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" />
</div>
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?
Regards,
Gary ]]> Scripting - Client Side the_cat http://forums.codeguru.com/showthread.php?537723-RESOLVED-Positioning-of-images-one-on-top-of-another