如何在谷歌地图 DIV 中放置 DIV？答案

【问题标题】：How to place a DIV within a google map DIV?如何在谷歌地图 DIV 中放置 DIV？
【发布时间】：2014-01-10 22:46:01
【问题描述】：

正如您在this link 上看到的，在页面底部有一个包含谷歌地图的 div。我想在谷歌地图区域内放置一个红色的 DIV（.blocktest）。问题是红色 DIV 不可见，尽管它的 z-index 高于地图（它可能在地图后面）。问题是什么？谢谢

link

HTML：

<div id="fullcontainer"></div>
<div id="map"><div id="map-canvas"><div class="blocktest">div that should be above the map</div></div></div>

风格：

#fullcontainer {
    margin-bottom:300px;
    position:relative;
    z-index:2000;
    background: #F2F2F2;
}

.blocktest {
   width: 60%;
   background: red;
   z-index: 30;
position: absolute;
    left: 20px;
    bottom: 56px;
}
#map {
    position:fixed;
    z-index:1;
    height:400px;
    bottom:0;
    width:100%;
}

#map, #map-canvas {
    width: 100%;
    height: 400px;
    float: left

}

【问题讨论】：

标签： html css google-maps-api-3

【解决方案1】：

可以通过将 div 置于 absolute 位置。

但在您的情况下，您将 blocktest div 放在 map-canvas div 中，被 Google 地图脚本覆盖。所以改变喜欢

<div class="blocktest">div that should be above the map</div>
<div id="map-canvas"></div>

【讨论】：

@Greg 尽量避免将z-index 用于#fullcontainer，这会对您产生很大影响。

【解决方案2】：

据我所知，谷歌重写了其容器的 innerHtml。在这种情况下，你在谷歌地图容器中放置一个 div 对你没有多大好处。

如果我是你，我会将 .blocktest div 放在 google maps 容器之外。我会将它们包装在一个具有“位置：相对”样式属性的 div 中，并在该容器内提供“位置：绝对”属性，以便它们可以相对于包装器 div 定位。为 google maps 容器 div 提供比 .blocktest div 更低的 z-index 值，您就可以开始了。

你的代码应该是这样的：

<div id="fullcontainer" style="position: relative;">
  <div id="map-canvas" style="position: absolute; z-index: 1;"></div>
  <div class="blocktest" style="position: absolute; z-index: 2;">div that should be above the map</div>
</div>

如果您有任何问题，请询问。

干杯！

【讨论】：