Question

I have a element, containing three overlapping images. Inspecting the element in Chrome shows this:

<span id=​"span1">​
   <img id=​"img1" src=​"images/​progressbar.gif" width=​"120" style=​"position:​ relative;​ z-index:​ 3;​">​
   <img id=​"img2" src=​"images/​progressbar.gif" style=​"width:​ 120px;​ height:​ 12px;​​ position:​ relative;​ left:​ -120px;​ z-index:​ 2;​">​
   <img id=​"img3" src=​"images/​progressbar.gif" style=​"width:​ 120px;​ height:​ 12px;​ position:​ relative;​ left:​ -240px;​ z-index:​ 1;​">​
</span>​

The important point is that the second two images are given a relative position, shifting them to the left so they perfectly overlap the first. But the span itself is still 360 pixels wide (3 x 120 pixels per image). So how can I achieve this effect while keeping the span width tightly bounded around the images?

Thanks!

Answer 1

What’s happening here is that the browser’s layout engine performs an initial layout (before taking into account your relative positioning), computes the span‘s width (which is 3x your image width) and then moves the images to where you specify.

The obvious solution is to also do <span id="span1" style="width:120px;">. I think this is acceptable in your case, as the 120px part (and its multiples) already needs to be specified to achieve the layout.

Another solution would be to give position: absolute to all images except the first (you will also need to give position: relative to the <span>). This would remove them from the layout and allow your span to snugly wrap around all remaining content (i.e., just one image). In this case though I am not sure how the z-index properties of your images (which have different position) would interact. Probably just fine. 🙂

Edit: by using the last solution (and assuming there are no z-index problems), you can achieve your desired layout without specifying 120px anywhere. This could be important, so keep it in mind.