Full-size Google map and CSS

Question

I have a full google map on the page using height="100%" and width="100%" . I want to know that several css divs are superimposed on it. I read that using negative values ​​such as margin-top: -500px; will work, and they, however, when I try to assign the background color of the div, it does not display it on the map, it displays it under it, which is not what I want at all. Is there a solution to this? The code:

 <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe> <div class="content"> I want this text to be in a div box that has a black background. <br /> </div> 

Style:

 .content { margin-top: -500px; width: 390px; background-color: black; } 

Answer 1

 html, body { width: 100%; height: 100%; } .map-frame { width: 100%; height: 100%; position: relative; } .map-content { z-index: 10; position: absolute; top: 50px; left: 50px; width: 390px; background-color: black; color: #FFF; } 

http://jsfiddle.net/oswaldoacauan/tx67C/

Answer 2

add this to your css. works in chrome no less

 position:absolute; z-index:9999; color:#fff; 

Answer 3

The div you want to create must be absolutely positioned and have a positive z-index so that it appears above the map at least