谷歌地图嵌入与粘性导航栏重叠答案

【问题标题】：Google Maps embed overlapping with sticky nav-bar谷歌地图嵌入与粘性导航栏重叠
【发布时间】：2016-12-29 23:36:20
【问题描述】：

有点不确定如何处理这个问题。努力在自动生成的用于嵌入的 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，但我不确定将值放在哪里以及使用哪些值。

【问题讨论】：

z-index 听起来是最好的选择。使用负索引为您的wrapper_script 设置一个。或者将它放在 navbar 和 wrapper_script 上，但将 navbar 索引设置为更高。
我自己应该能够弄清楚这一点。谢谢！
别担心老兄:)

标签： jquery html css overlap

【解决方案1】：

默认情况下，所有 z-index 都设置为 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 索引变得更加复杂，但是对于您当前的问题，这将正常工作。

【讨论】：

【解决方案2】：

如果您使用引导导航栏并将其固定在顶部，因此您需要提供主体填充：70px，在引导文档中您可以看到：

需要身体填充固定导航栏将覆盖您的其他内容，除非您在 .试试你自己的价值观或使用我们下面的 sn-p。提示：默认情况下，导航栏的高度为 50px。

body { padding-top: 70px; }

【讨论】：