Html – 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.


Best Solution

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.

Related Question