Question

如何在我的Google Maps API“map”div上浮动div“菜单”。并且可能在菜单div上添加50％的透明度。可以这样做吗？

#map {width: 835px; height 540px; float: left;}
#menu {width: 145px; float: right; padding-top: 10px;}

<div id="map"></div>
<div id="menu"></div>

Answer 1

你不能像这样更改DIVs的位置：

<div id="menu"></div>
<div id="map"></div>

如果没有，你可以这样做：

<div id="map"></div>
<div id="menu"></div>

#menu
{
    position: absolute;
    top: 10px;  /* adjust value accordingly */
    left: 10px;  /* adjust value accordingly */
}

更新2

跨浏览器透明度样式：

.dropSheet
{
    background-color: #000000;
    background-image: none;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

只需将课程dropSheet应用于您想要透明的元素。

Answer 2

好吧，float的基本结构应该包含一个wrap属性，它的position属性设置为默认值以外的东西，以及一个最后清除float的元素。
像这样：

#wrapper {
  position:relative;
}
#menu {
  float:right;
}

<div id="wrapper">
  <div id="map"></div>
  <div id="menu"></div>
  <br clear="both" />
</div>

提供的代码没有经过特别测试，但浮动和菜单是比地图更高层的事实，应该使菜单位于右侧的地图顶部。有关透明度问题，请参阅this fantastic resource。

希望能帮到你。

使用Google Maps API在div上方使用div

2 个答案: