web-dev-qa-db-fra.com

Google Map pleine largeur et CSS

J'ai une carte google pleine largeur sur une page en utilisant height="100%" et width="100%". Je veux savoir mettre quelques trucs div css dessus de celui-ci. J'ai lu que l'utilisation de valeurs négatives telles que margin-top: -500px; fonctionnera, et elles fonctionnent. Cependant, lorsque j'essaie d'attribuer une couleur à l'arrière-plan de la div, elle ne l'affiche pas sur la carte, mais sous celle-ci, qui n'est pas t ce que je veux du tout. Y a-t-il une solution à cela? 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;
}
cssmaps
9
Joshua Terrill
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/

15
Oswaldo Acauan

ajoutez ceci à votre css. fonctionne en chrome au moins

position:absolute;
z-index:9999;
color:#fff;
2
daniel.auener

la div que vous souhaitez styler doit être positionnée de manière absolue et dotée d'un indice z positif de sorte qu'elle s'affiche au-dessus de la carte et non en dessous

1
Afzaal