Карты Google, Z Index и выпадающие меню Javascript

Попробуйте установить z-index вашего меню на безумно высокий уровень. По-видимому Карты Google используют диапазон от -9000000 до 9000000.

Оберните карту в DIV, дайте этому DIV z-index, равное 1. Оберните раскрывающийся список в DIV и присвойте ему более высокое значение.

Обратите внимание, что раскрывающиеся меню в некоторых браузерах (кхмIE * кхм) вообще не могут быть перемещены по zPosition. Вам нужно будет использовать «прокладку iframe», чтобы скрыть его или полностью скрыть раскрывающийся список, если вы хотите разместить что-то над ним. См .: http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim

Если ваша проблема возникает в Internet Explorer, но отображается так, как вы ожидаете в FireFox или Safari, эта ссылка был чрезвычайно полезен для меня с аналогичная проблема.

Похоже, это сводится к идее, что маркировка элемента как «position: relative;» в CSS заставляет IE6 и 7 связываться с его z-индексом по сравнению с другими элементами, которые предшествуют ему в документе HTML, неинтуитивно и противоречащим спецификациям. Предположительно IE8 ведет себя «правильно», но я сам его не тестировал.

Совет Anutron будет действительно полезен, если ваша проблема связана с элементом формы <SELECT>, но если вы используете JavaScript для управления div или ul, чтобы действовать как раскрывающийся список, я не думаю, что это поможет.

Карта уже заключена в div. Присвойте ему отрицательный z-index, и он заработает - с одной оговоркой: элементы управления gmaps не доступны для кликов.

Если ваше меню обернуто в контейнер div, например Затем #menuWrap присвоит ему относительную позицию и высокий z-index .... например.

#menuWrap {
  position: relative;
  z-index: 9999999
}

Убедитесь, что ваша карта находится внутри div

IE дает проблему

каждый div, заключенный в относительный позиционированный div, будет запускать новый z-index в IE. IE интерпретирует внешние относительные div в порядке html. Последнее определение находится сверху. Независимо от того, каковы z-индексы div внутри относительно позиционированных div.

Решение для IE: определите div, который должен быть наконец наверху в html.

(Таким образом, z-index работает в IE, но только для каждого держателя div, каждый держатель div не зависит от других держателей div)

z-index (особенно в Internet Explorer 7) у меня действительно не работал. Я пробовал много разных комбинаций высоких и низких z-индексов карты, но не получил удовольствия.

Безусловно, самым простым и быстрым ответом для меня было переупорядочить мою разметку / css, чтобы мои всплывающие окна / ролловеры были перечислены в разметке выше / раньше моей карты (буквально до <div id = "map">), таким образом я мог позволить z-index оставаться по умолчанию (auto) и перейти к более важным аспектам моего веб-приложения;)

Надеюсь это поможет!

<ul id = "rollover">
<li><a href = "#here">There</a></li>
</ul>
<div id = "map">...</div>

Нет необходимости устанавливать z-index и для карты, и для меню. Если вы просто установите z-индекс меню выше, чем карта, это не обязательно сработает.

Установите z-index div карты равным -1. Теперь меню выпадет и отобразится поверх карты ......... но если вы используете оболочку, карта больше не будет интерактивной, поскольку теперь она находится за оболочкой.

Чтобы обойти это, используйте функции onmouseover и onmouseout в своей оболочке div. Убедитесь, что они находятся в вашем div-оболочке, а не в div вашей карты.

onmouseover = "getElementById('map').style.zIndex = '10000';" 

onmouseout = "getElementById('map').style.zIndex = '-1';"

Я создал раскрывающийся список стиля Google и имел ту же проблему ... используя V3 api для карт Google, вы просто создаете элемент управления и размещаете его на карте, используя:

map.controls[google.map.ControlPosition.TOP].push(control);

Так как это раскрывающийся список, просто убедитесь, что z-index содержащего div самый высокий (z = 3), тогда раскрывающаяся часть, содержащая элементы меню, ниже, чем содержащая div (z = 0).

Вот пример.

По моему опыту, прокладки нужно использовать только для подключаемых модулей (например, в Google Планета Земля).

Я обнаружил, что иногда непреднамеренное пренебрежение объявлением! Doctype вызывает такого рода икоту в IE, когда другие браузеры, похоже, могут нормально согласовывать страницу.