22

Anyone know how to do picture overlay or appear on top of each other in HTML? The effect will be something like the marker/icon appear on Google Map where the user can specify the coordinate of the second picture appear on the first picture.

Thanks.

smalldream
  • 223
  • 2
  • 3
  • 7

2 Answers2

31

You can use <div> containers to seperate content into multiple layers. Therefore the div containers have to be positioned absolutely and marked with a z-index. for instance:

<div style="position: absolute; z-index:100">This is in background</div> 
<div style="position: absolute; z-index:5000">This is in foreground</div>

Of course the content also can contains images, etc.

Johannes Hädrich
  • 1,223
  • 1
  • 12
  • 20
  • When I do this everything is on top of everything. I just want to overlap a h3 on top of an image. It cannot be a background because it has an opacity. – Jordan Aug 02 '12 at 01:19
3

Use a DIV tag and CSS absolute positioning, with the z-index property.

http://www.w3.org/TR/CSS2/visuren.html

Subimage
  • 4,393
  • 3
  • 24
  • 18