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

StackOverflow https://stackoverflow.com/questions/86604

Вопрос

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

Спасибо!

Это было полезно?

Решение

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

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

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

Другие советы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот пример пример.

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top