Google Maps a larghezza intera e CSS

Question

Ho una mappa google a larghezza intera su una pagina utilizzando height="100%" e width="100%". Voglio sapere di mettere alcune cose css div in cima di esso. Ho letto che usare valori negativi come margin-top: -500px; funzionerà, e lo fanno, tuttavia quando provo ad assegnare un colore allo sfondo del div, non lo visualizza sulla mappa, lo visualizza sotto di esso, che non è quello che voglio affatto c'è una soluzione a questo? Codice:

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

Stile:

.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

aggiungere questo alla tua CSS. lavora in cromo almeno

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

Answer 3

il div si vuole lo stile deve essere posizionato in modo assoluto e dato un z-index positivo in modo che si vede sopra la mappa non inferiore