How to overlay an image over another image?

Question

I want one image above the other. How can I do it?

http://twitpic.com/2cnpku

Answer 1

Set the image you want on top to have a higher z-index. Right now, it has a lower z-index.

Answer 2

from the code you posted, it appears you are passing an img element into another the src attribute of another img element. Is there a reason you are doing this?

<style type="text/css">
  .imgA1 {position:absolute;
          top:0px;
          left:0px;
          z-index:2;
          width:1300px;
          height:283px;}
  .imgB1 {position:absolute;
          top:0px;
          left:0px;
          z-index:1;
          width:1300px;
          height:1000px;}
</style>
<img class="imgA1" src="images/home_nav.png" alt="home_nav" />
<img class="imgB1" src="images/paperbackground.png" alt="Background" />

A similar code mockup can be seen at http://jsfiddle.net/gBPBd/3/ with my images to prove the concept and it is funcitoning in chrome, ie8.