Question

正如您在this link上看到的那样，页面底部有一个包含谷歌地图的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

}

Answer 1

据我所知，谷歌重写了其容器的innerHtml。在这种情况下，你在谷歌地图容器中放置一个div对你来说不会太好。

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

询问您是否有疑问。

干杯！

Answer 2

可以将div置于 absolute 定位中。

但在您的情况下，您将 blocktest div置于map-canvas div中，而被Google地图脚本覆盖。所以像

一样改变

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

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

2 个答案: