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

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

Если ваше меню завернуто в контейнер div, например. #menuWrap затем назначьте его относительное положение и придайте ему высокий индекс z... например,

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

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

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

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

Ответ 8

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

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

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

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

Ответ 9

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

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

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

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

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

Ответ 10

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

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

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

Здесь example.

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

Ответ 11

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