Question

Непонятно, как с этим бороться. Стремясь найти фрагмент HTML в автоматически сгенерированном HTML-коде, который используется для вложения.

Вот оно.

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

Из-за этого он перекрывается с моей навигационной панелью. http://i.imgur.com/6L6ske5.png

Любая идея, какой CSS я мог бы использовать, чтобы остановить это? Я думал об использовании z-индекса, но я был бы не уверен, где поставить значение, а какие - использовать.

Answer 1

Все индексы z установлены по умолчанию 0. Порядок укладки элементов сначала определяется его положением в DOM. Ваш браузер читает ваш HTML сверху вниз и складывает следующий контейнер, который он читает поверх последнего, который он читает. Например, ваш footer будет уложен поверх вашего header, потому что ваш footer читается после header.

Так что при условии, что все z-index 0 по умолчанию, просто добавьте выше z-index в свой заголовок, например. z-index: 1;, или для сверхбезопасности z-index: 9999; Я бы не использовал отрицательный z-index на вашей карте Google, потому что, если у вас есть весь ваш контент, скажем, оберточный div с цветом фона, вы в конечном итоге уложите свою карту за эту оболочку div ,

быть также известно, что для z-index работать элемент должен иметь свою позицию указано, т.е. relativeabsolute или fixed. Z-индексация становится намного сложнее, когда вы начинаете складывать элементы относительно родительских контейнеров, но для вашей текущей проблемы это будет работать нормально.

Answer 2

, если вы используете загрузочный Navbar и его фиксированным к началу, так что вы должны дать отступы тела: 70px, в начальной загрузке дока вы можете увидеть:

набивки тела требуется Неподвижная Navbar будет накладывать свой другой контент, если не вам добавьте отступы в верхнюю часть. Попробуйте свои собственные значения или используйте наш фрагмент ниже. Совет. По умолчанию навигационная панель имеет высоту 50 пикселей.

body { padding-top: 70px; } 

подробнее: http://getbootstrap.com/components/#navbar