title: Full-Width Google Map And CSS
body: <p>I have a full-width google map on a page using <code>height="100%"</code> and <code>width="100%"</code>. I want to know put some css div stuff <em>on top</em> of it. I read that using negative values such as <code>margin-top: -500px;</code> will work, and they do, however when I try to assign a color to the background of the div, it doesn't display it over the map, it displays it under it, which isn't what I want at all. Is there a solution to this?
  Code:</p>
  
  <pre><code>&lt;iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;amp;ie=UTF8&amp;amp;ll=37.0625,-95.677068&amp;amp;spn=56.506174,79.013672&amp;amp;t=m&amp;amp;z=4&amp;amp;output=embed"&gt;&lt;/iframe&gt;
  
  &lt;div class="content"&gt; I want this text to be in a div box that has a black background. &lt;br /&gt; &lt;/div&gt;
  </code></pre>
  
  <p>Style:</p>
  
  <pre><code>.content {
       margin-top: -500px;
       width: 390px;
       background-color: black;
  }
  </code></pre>