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

html overlay image
smalldream picture smalldream · Sep 19, 2008 · Viewed 87.1k times · Source

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.

Answer

Johannes Hädrich picture Johannes Hädrich · Sep 19, 2008

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 questions

Text overlays over image using relative positioning

I want to position a text overlaying an image. Below is my currently used code: My problem is, although the text is properly overlayed, the "space" it consumes in the <td> is still there! When I tried to …

Read More
How to overlay an image/watermark with pure CSS and HTML

Is there an easy way with relative positioning to overlay a transparent PNG (or any other image) over an image tag with CSS just by passing a class? <img class="watermarked" src="http://placehold.it/500x325.jpg" alt="Photo"&…

Read More
How to overlay one div over another div

I need assistance with overlaying one individual div over another individual div. My code looks like this: <div class="navi"></div> <div id="infoi"> <img src="info_icon2.png" height="20" width="32"/> </…

Read More