How to let an HTML image overlap another

Question

<div class="mainRunner">
    <img src="../App_Themes/Default/images/a.gif" />
    <img src="../App_Themes/Default/images/b.gif" />
</div>

I want b.gif to overlap a.gif rather than go on a new line - how can I achieve this?

Answer 1

You would have to use positioning and z-index to get this to work, with changing the images to block level elements and adding a class:

.mainRunner {
  border: 1px solid #000;
}

.img1 {
  border: 1px solid #f00;
  position: relative;
  z-index: 2;
}

.img2 {
  border: 1px solid #0f0;
  position: relative;
  z-index: 1;
  top: -12px;
  left: -12px;
}

<div class="mainRunner">
  <img class="img1" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" />
  <img class="img2" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" />
</div>

Answer 2

Make sure the the containing element (wrapping div) has relative positioning applied.

div.mainRunner { position:relative;}

After this you can do one of the following.

1. Apply a class name to each image so you can map to it with absolute positioning.

   div.mainRunner img.classname { position:absolute; top:__; left:__;}

Lastly apply z-index to the image class.

div.mainRunner img.classname { position:absolute; top:__; left:__; z-index:50;}

And for the second image;

div.mainRunner img.classname { position:absolute; top:__; left:__; z-index:51;}

If you have no control over applying classes to the images then do this (on the assumption that only 2 images will be in this div;

div.mainRunner img.classname:first-child { position:absolute; top:__; left:__; z-index:50;}
div.mainRunner img.classname { position:absolute; top:__; left:__; z-index:51;}