css - 在 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;
}

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

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

如何在谷歌地图上浮动一个 div？

提前致谢！

Answer 1

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

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