CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 3 of 3
  1. #1
    Join Date
    Jun 2009

    [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:
    <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?

  2. #2
    Join Date
    Apr 2000
    Belgium (Europe)

    Re: Positioning of images one on top of another

    Absolute positioning inside it's parent div seems the most obvious aproach. you probably want to add a separate div to hold only the images to simplify this.
    trying to position images inside a block that also has text, <br's>, links etc is making things unnecessarily harder than it needs to be.

  3. #3
    Join Date
    Jun 2009

    Re: Positioning of images one on top of another

    Many thanks for your help with this. Your advice was exactly right. I now have a parent div for just the images and then each image is absolutely placed within that.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Windows Mobile Development Center

Click Here to Expand Forum to Full Width

On-Demand Webinars (sponsored)

We have made updates to our Privacy Policy to reflect the implementation of the General Data Protection Regulation.