How to let an HTML image overlap another

Question

    
    


        
                      

              相关标签:
       
      

Answer 1

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;}

Answer 2

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;
  position: relative;
}

.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 3

You could use absolute positioning (please don't), or negative margins with display:inline.