我正在尝试构建一些东西,以防止用户单击地图的交互式部分,直到他们最初单击该地图(如您在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