title: Float a div over Google Maps
body: <p>I`m doing this website, and I need to put some shadows over google Maps <code>&lt;div&gt;</code> to achieve a shadow effect:</p>
  
  <p>However, it`s not working.</p>
  
  <p>This is how my css looks like right now:</p>
  
  <pre><code>html { 
  height: 100% 
  }
  
  body { 
  height: 100%; 
  margin: 0; 
  padding: 0 
  }
  
  #map_canvas { 
      height: auto;
      z-index: 1;
  }
  
  #topBar {
  background-image:url(img/top.jpg);
  background-repeat:repeat-x;
  height: 100px;
  min-height:100px;
  -moz-box-shadow: 0px 5px 5px #888;
  -webkit-box-shadow: 0px 5px 5px #888;
  box-shadow: 0px 5px 5px #888;
  z-index:900;
  }
  </code></pre>
  
  <p>As you can see, I`m using an image to create the shadow.
  But my problem is: the map is not even loading.
  If I put a fixed height instead of auto, it loads. But I fail at giving that shadowy vision. What happens is that the map is loaded <strong>ON TOP</strong> of the div with the shadow.</p>
  
  <p>I already tried this solution already, with no success:</p>
  
  <p><a href="https://stackoverflow.com/questions/6037712/how-to-float-a-div-over-google-maps">How to float a div over Google Maps?</a></p>
  
  <p>Thanks in advance!</p>