How To Make A Div Float Over Google Maps

Say you have a div that displays a Google Map. If you need to make another div 'float' over the map, follow these simple instructions.

Attempt adding this solution to your HTML page:

<style>

#wrapper { position: relative; }

#over_map { position: absolute; top: 10px; left: 10px; z-index: 99; }

</style>

<div id="wrapper">

<div id="google_map">

</div>

<div id="over_map">

</div>

</div>

Alternatively, you may add an ID to your div and give it the following attributes in the corresponding CSS:

#floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; }

Either one of these should have the effect you're looking for. Please share your experience in the section provided below. Thank you for visiting Base64!