我正在尝试构建一些东西,以防止用户单击地图的交互式部分,直到他们最初单击该地图(如您在Google搜索诸如Toronto Eaten Centre之类的地方时显示的那样)为止。

我做了一个视觉模拟来更好地解释:

我正在使用谷歌地图,但无法使div漂浮在google地图上(这是我的第一次尝试,只需单击时将div漂浮在div之上便会消失,地图将通过javascript调整大小) 。当您搜索here找到的位置示例时,Google可以很好地做到这一点。

这是我的fiddle试图将div浮动到顶部,以便我可以使用它单击进入实际地图。

以下是浮动div的css,即使具有绝对位置和z索引也不会显示在地图上方

.map-floater {
position: absolute;
z-index: 3;
height: 280px;
width: 100%;
background: #555;
opacity: 0.7;
}

最佳答案

您的标记不正确,请将叠加层放置在与地图相同的容器中

   <div class = "map-holder">
       <div class = "map-floater"> </div>
       <iframe src="path/to/map" width= "100%" height = "380px" frameborder="0"/>
    </div>


DEMO

10-05 20:47
查看更多