J'ai une carte Google pleine largeur sur une page en utilisant style: hauteur = "100%" et largeur = "100%" . Je veux savoir que CSS div Stufft sur le dessus de celui-ci. J'ai lu que l'utilisation de valeurs négatives telles que margin-top: -500px; fonctionnera, et ils le font, cependant, lorsque j'essaie d'affecter une couleur à l'arrière-plan de la DIV, il ne l'affiche pas Sur la carte, il l'affiche sous celui-ci, ce qui n'est pas ce que je veux du tout. Y a-t-il une solution à cela?
Code:
4 Réponses :
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/
Oui, tandis que la marge négative est sémantiquement correcte, je vous recommande également d'utiliser un positionnement absolu à la place.
Ajoutez ceci à votre CSS. Fonctionne en chrome au moins
La Div que vous souhaitez stylé doit être positionnée absolument et donner un indice Z positif de sorte qu'il apparaisse au-dessus de la carte non inférieure à
Si je peux, j'ai utilisé ce qui suit même sans CSS pour la carte.
Il suffit de mettre la largeur = "100%" dans l'iframe p> p >
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1994.873621232488!2d32.58519671879903!3d0.342002233462275!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x177dbbaed45800cb%3A0xfba72049a6cb630c!2sKamwokya%20Market%2C%20Kampala!5e0!3m2!1sen!2sug!4v1633372520333!5m2!1sen!2sug" width="100%" height="500" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
Voici la solution Définir Google Maps Conteneur Largeur et hauteur 100%