How to do picture overlay in HTML (something like marker on top of google map)?

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.

2008-09-19 08:02
by smalldream

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.

2008-09-19 08:10
by Johannes Hädrich

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 2012-08-02 01:19

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

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

2008-09-19 08:07
by Subimage

-1

css layers.

2008-09-19 08:08
by user9419

CSS layers have been deprecated - b. e. hollenbeck 2012-06-23 20:55

z-index has most definitely not been deprecated.. - Jon Egeland 2012-08-30 19:58