Full-Width Google Map und CSS

Ich habe eine vollständige Google-Karte auf einer Seite mit height="100%" und width="100%". Ich möchte wissen, setzen einige Css div Sachen oben davon. Ich lese, dass die Verwendung von negativen Werten wie margin-top: -500px; funktioniert, und sie tun, aber wenn ich versuche, dem Hintergrund des div eine Farbe zuzuordnen, wird es nicht über der Karte angezeigt, es wird darunter angezeigt, was nicht t was ich überhaupt will. Gibt es dafür eine Lösung? Code:Full-Width Google Map und CSS

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

Stil:

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

Quelle

2012-04-20 Joshua Terrill

Hier das Update ist [Set Google Maps Container DIV Breite und Höhe 100%] (http://StackOverflow.com/a/18147172/782535) –

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/

Quelle

2012-04-20 17:48:51

Ja, während negative Marge semantisch korrekt ist, würde ich auch empfehlen, stattdessen absolute Positionierung zu verwenden. –

diese zu Ihrem CSS hinzufügen. arbeitet in Chrom mindestens

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

Quelle

2012-04-20 17:49:17

die div Sie Stil wollen, sollten unbedingt und angesichts einer positiven z-Index so positioniert werden, dass sie oberhalb der Karte zeigt nicht unter

Quelle

2015-09-28 21:41:03 Afzaal

Full-Width Google Map und CSS

Antwort

Verwandte Themen