通过谷歌地图浮动一个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;
}

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

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

How to float a div over Google Maps?

提前致谢！

Answer 1

我认为如果你只是在元素中添加一个位置就会修复它。 Z-index需要一个工作位置..

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