I just stumbled over a great solution to a problem I had; getting own content to float above a Google Maps IFRAME. I thought I had tried every possible way, using a variety of tricks. However, the solution would reveal itself to be much easier than I would have thought!
Ben Simon writes on his blog on how he solved the issue nice and tidy by simply using a parent container for two child DIVs; the overlay and the map. Like this:
<div id="container">
<div id="layer">This will be on top of the map</div>
</div>
<div id="layer">This will be on top of the map</div>
</div>
Using the following CSS markup:
#container {
position: relative;
}
position: relative;
}
#layer {
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 0px;
z-index: 10px;
}
Very nice, Ben!
Add your comment below, or trackback from your own site.
Subscribe to these comments.
Be nice. Keep it clean. Stay on topic. No spam.
You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>