css - 在 Google map 上 float 一个 div

Question

我正在做这个网站，我需要在谷歌地图上添加一些阴影 <div>实现阴影效果:

但是，它不起作用。

这就是我的 CSS 现在的样子:

html { 
height: 100% 
}

body { 
height: 100%; 
margin: 0; 
padding: 0 
}

#map_canvas { 
    height: auto;
    z-index: 1;
}

#topBar {
background-image:url(img/top.jpg);
background-repeat:repeat-x;
height: 100px;
min-height:100px;
-moz-box-shadow: 0px 5px 5px #888;
-webkit-box-shadow: 0px 5px 5px #888;
box-shadow: 0px 5px 5px #888;
z-index:900;
}

如您所见，我正在使用图像来创建阴影。 但我的问题是: map 甚至没有加载。 如果我放置固定高度而不是自动高度，它会加载。但我没能给出那种阴暗的景象。发生的情况是 map 加​​载到带有阴影的 ON TOP 上。

我已经尝试过这个解决方案，但没有成功:

How to float a div over Google Maps?

提前致谢!

Answer 1

我觉得只要给元素加个位置就可以解决了。 Z-index 需要一个职位才能工作..

所以输入“position:relative;”在这两个元素上，你会没事的。