div поверх div с Google Maps API

Question

Как мне поместить div "menu" поверх моего div "map" API Google Maps. И, возможно, возможно добавить прозрачность 50% в меню div. Можно ли это сделать?

#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

Ну, базовая структура с плавающей точкой должна содержать обертывающий элемент, у которого свойство position имеет значение, отличное от значения по умолчанию, и элемент, который очищает с плавающей точкой в ​​конце.
Как это:

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

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

Приведенный код не был специально протестирован, но поплавок и тот факт, что меню является более высоким слоем, чем карта, должны создать меню в верхней части карты с правой стороны. По вопросу прозрачности см. этот фантастический ресурс .

Надеюсь, это помогло тебе.