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-index，但我不确定将值放在何处，以及使用哪些值。

Answer 1

默认情况下，所有z-index＆＃s都设置为0。元素堆叠顺序首先由其在DOM中的位置确定。您的浏览器从上到下读取您的HTML，并将其读取的下一个容器堆叠在它读取的最后一个容器之上。例如，您的footer将叠加在header之上，因为footer之后会读取header。

因此，默认情况下，一切都是z-index 0，只需在标头中添加更高的z-index，例如z-index: 1;，或者为了超级安全z-index: 9999;我会避免在您的谷歌地图上使用否定z-index，因为如果您拥有所有内容，请使用带有背景颜色的包装div ，你最终会在这个包装div后面堆积你的地图。

另请注意，要z-index工作，元素必须指明其位置，即relative absolute或fixed。当您开始相对于父容器堆叠元素时，Z-indexing会变得复杂得多，但对于您当前的问题，这将正常工作。

Answer 2

如果您使用bootstrap导航栏并将其固定到顶部，那么您需要提供正文填充：70px，在bootstrap doc中您可以看到：

需要身体填充固定的导航栏将覆盖您的其他内容，除非您添加填充到顶部。尝试自己的价值观或使用下面的代码段。提示：默认情况下，导航栏高50像素。

body { padding-top: 70px; }

更多信息： http://getbootstrap.com/components/#navbar

Google地图与粘性导航栏重叠嵌入

2 个答案: