如何将一个DIV置于Google地图中的一个DIV内？

Question

正如您在 此链接 中所看到的，在页面底部有一个包含谷歌地图的 div。我想在谷歌地图区域内放置一个红色 DIV (.blocktest)。问题是，尽管红色 DIV 具有比地图更高的 z-index（它可能在地图后面），但它并不可见。问题出在哪里？谢谢

链接

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

}

- Greg

Answer 1

据我所知，谷歌会重写其容器的innerHtml。如果您将一个div放在谷歌地图容器内部，那么这对您来说不是很有用。

如果我是您，我会将.blocktest div放在谷歌地图容器之外。我会将它们包裹在一个具有“position:relative”样式属性的div中，并为此容器中的div赋予“position:absolute”属性，以便它们可以相对于包装器div定位。将谷歌地图容器div的z-index值设为较低的值，而将.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>

如果您有问题，请提出。

加油！

- ilter

Answer 2

如果将div设置为absolute定位，则可以实现。

但在您的情况下，您将blocktest div放置在map-canvas div中，该div被Google地图脚本覆盖。因此，请进行更改，例如：

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

- Praveen

---

@Greg 尽量避免在 #fullcontainer 中使用 z-index，这会对你产生很大的影响。 - Praveen