在 Google 地图上浮动一个 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;
}

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

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

How to float a div over Google Maps?

提前致谢！

Answer 1

我认为如果你只为元素添加一个位置，它将被修复。 Z-index 需要一个位置才能工作..

所以把“位置：相对；”在这两个元素上，你会没事的。