when i click an image i want to display another image on top of previous image

simplest solution is to create a relative div that is placed in the flow of the page; place the base image first as relative so that the div knows how big it should be; place the overlays as absolutes relative to the upper left of the first image. The trick is to get the relatives and absolutes correct.

<div style="position: relative; left: 0; top: 0;">
  <img src="first.jpg" style="position: relative; top: 0; left: 0;"/>
  <img src="top.jpg" style="position: absolute; top: 30; left: 70;"/>
</div>>