How to float a div over Google Maps?

HtmlCssGoogle Maps

Html Problem Overview

I have a div that displays a Google map.

How do I make another div float over the map div?

Html Solutions

Solution 1 - Html

Try this:

<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>

Solution 2 - Html

#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;
}

Just need to move the map below this box. Work to me.

From Google

Solution 3 - Html

Just set the position of the div and you may have to set the z-index.

ex.

div#map-div {
    position: absolute;
    left: 10px;
    top: 10px;
}
div#cover-div {
    position:absolute;
    left:10px;
    top: 10px;
    z-index:3;
}

Solution 4 - Html

absolute positioning is evil... this solution doesn't take into account window size. If you resize the browser window, your div will be out of place!

Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Google Maps Solutions

Previous Solution:

How to execute PowerShell commands from a batch file?

PowershellCommand LineBatch FilePowershell 2.0

Next Solution:

Rspec testing redirect_to :back

Ruby on-RailsRedirectRspecRspec2

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAdhamView Question on Stackoverflow
Solution 1 - HtmlDanView Answer on Stackoverflow
Solution 2 - HtmlMatheusView Answer on Stackoverflow
Solution 3 - HtmlAdrian RodriguezView Answer on Stackoverflow
Solution 4 - HtmlatnmachineView Answer on Stackoverflow