Question

I am working in javascript. I am facing an issue i.e. I want to place an image on another image. MY Code is follows:

<div>
  <img src="1.jpg" style="z-index:1;"/>
  <img src="2.png" style="z-index:2; left:-100px;"/>
</div>

The problem is when i run the code it places image on the right bottom corner of the DIV but not on the image.
Any help would be appreciated.

Answer 1

Working DEMO

Use position: absolute in CSS:

img { position:absolute; }

<div>
  <img src="1.jpg"/>
  <img src="2.png"/>
</div>

Note: You don’t need to specify z-index if you want last image to appear on top. This is default browser behaviour.