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

Question

Сегодня у меня возникла небольшая проблема: у меня есть раскрывающееся меню JS, и когда я вставил GoogleMap ... Меню отображается за картой Google ... Любые идеи о том, как выбрать z Index of Google Map?

Спасибо!

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

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

Answer 4

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

Answer 5

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

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

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

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

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

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

Вот пример .

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

Answer 10

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

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

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

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

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