Un poco inseguro de cómo lidiar con esto. Luchando por encontrar el fragmento de HTML en el código HTML generado automáticamente que se utiliza para el incrustado.

Aquí está.

<div id="wrapper_script">
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDeXmCynoz5WyHNOSdME2F0CgQrXoj-ecg'></script>
<div style='overflow:hidden;height:400px;width:800px;'>
  <div id='gmap_canvas' style='height:400px;width:800px;'></div>
  <style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
</div>
<a href='https://embedmaps.org/'>google maps widget html</a>
<script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=abb348039bcaaa22664b69e613b04fdd8887cf2f'></script>
<script type='text/javascript'>
 function init_map(){
  var myOptions = {zoom:13,center:new google.maps.LatLng(52.0833,4.2999999999999545), mapTypeId: google.maps.MapTypeId.ROADMAP};
  map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
  marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(52.0833,4.2999999999999545)});
  infowindow = new google.maps.InfoWindow({content:'<strong>Club Magenta</strong><br><br> The Hague<br>'});
  google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});
  infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
  </script>
</div>

Debido a esto, se superpone con mi barra de navegación. http://i.imgur.com/6L6ske5.png

¿Alguna idea de qué CSS podría usar para evitar que esto suceda? Estaba pensando en usar el índice z, pero no estaría seguro de dónde poner el valor y cuáles usar.

1
Rafe Siriso 30 dic. 2016 a las 02:36
1
z-index parece la mejor opción. Establezca uno en su wrapper_script con un índice negativo. O colóquelo en navbar y wrapper_script, pero configure el índice navbar para que sea más alto.
 – 
Timur Mamedov
30 dic. 2016 a las 02:41
Debería haber podido averiguarlo yo mismo. ¡gracias!
 – 
Rafe Siriso
30 dic. 2016 a las 02:49
No te preocupes amigo :)
 – 
Timur Mamedov
30 dic. 2016 a las 02:56

2 respuestas

Todos los índices z se establecen en 0 de forma predeterminada. Un orden de apilamiento de elementos se determina primero por su posición en el DOM. Su navegador lee su HTML de arriba a abajo y apila el siguiente contenedor que lee encima del último que leyó. Por ejemplo, su footer se apilará encima de su header porque su footer se lee después de header.

Entonces, dado que todo es z-index 0 de forma predeterminada, simplemente agregue un z-index superior a su encabezado, p. Ej. z-index: 1;, o para mayor seguridad z-index: 9999; evitaría usar un z-index negativo en su mapa de Google, porque si tiene todo su contenido en, digamos, un div contenedor con un color de fondo , terminará apilando su mapa detrás de este div contenedor.

También tenga en cuenta que para que z-index funcione, un elemento debe tener su posición indicada, es decir, relative absolute o fixed. La indexación Z se vuelve mucho más complicada cuando comienza a apilar elementos en relación con los contenedores principales, pero para su problema actual esto funcionará bien.

1
Old Gill 30 dic. 2016 a las 05:18

Si usa la barra de navegación de arranque y está fija en la parte superior, por lo que debe proporcionar un relleno corporal: 70 px, en el documento de arranque puede ver:

Se requiere relleno corporal La barra de navegación fija se superpondrá a su otro contenido, a menos que agregue relleno en la parte superior del archivo. Pruebe sus propios valores o utilice nuestro fragmento a continuación. Consejo: De forma predeterminada, la barra de navegación tiene 50 píxeles de alto.

body { padding-top: 70px; }

Más información : http://getbootstrap.com/components/#navbar

0
Vijay ijardar 30 dic. 2016 a las 08:15