html - 如何在谷歌地图 DIV 中放置一个 DIV？

Question

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

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

}

Answer 1

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

如果我是你，我会将那个 .blocktest div 放在谷歌地图容器之外。我会将它们包装在一个 div 中，该 div 的样式属性为“position:relative”，并为该容器内的 div 提供“position:absolute”属性，以便它们可以相对于包装器 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>

有问题就问。

干杯!