Google 地图、Z 索引和 JavaScript 下拉菜单
我今天遇到了一个小问题：我有一个 JS 下拉菜单，当我插入 GoogleMap 时...菜单在 Google 地图后面呈现...有关如何改变 Google 地图的 z 索引的任何想法？
谢谢！
I've run on a little problem today: I have a JS drop down menu and when I inserted a GoogleMap... the Menu is rendered behind the Google Map... Any ideas on how to chance the z Index of the Google Map?
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（11）
我发现有时无意中忽略声明 !doctype 会导致 IE 中出现这种问题，而其他浏览器似乎能够很好地协商页面。
I've found that sometimes inadvertently neglecting to declare the !doctype will cause this kind of hiccup in IE, when other browsers seem to be able to negotiate the page fine.
无需为地图和菜单设置 z-index。 如果只是将菜单的 z-index 设置为高于地图，则不一定有效。
将地图 div 的 z-index 设置为 -1。 现在菜单将下拉并显示在地图上......但如果您使用包装器，则地图将不再具有交互性，因为它现在位于包装器后面。
要解决此问题，请在包装器 div 中使用 onmouseover 和 onmouseout 函数。 确保它们位于您的包装器 div 中，而不是您的地图 div 中。
No need to set the z-index for both the map and the menu. If you simply set the z-index of the menu higher than the map, it won't necessarily work.
Set the z-index of the map div to -1. Now the menu will drop down and display over the map.........but if you're using a wrapper then the map will no longer be interactive as it is now behind the wrapper.
To work around this, use onmouseover and onmouseout functions in your wrapper div. Make sure those are in your wrapper div and not your map div.
我创建了一个谷歌风格的下拉菜单并遇到了同样的问题...使用谷歌地图的 V3 api，您只需创建一个控件并将其放置在地图上，使用：
由于它是一个下拉菜单，只需确保 z - 包含的 div 的索引最高 (z=3)，则包含菜单项的下拉部分低于包含的 div (z=0)。
这是一个示例。
根据我的经验，您唯一需要使用填充程序的时候是插件（例如 Google 地球）。
I created a google style drop-down and had the same issue...using the V3 api for google maps, you just create a control and place it on the map using:
Since it is a drop-down, just make sure the z-index of the containing div is highest (z=3) then the drop-down part containing the menu items is lower that the containing div (z=0).
Here's an example.
From my experience, the only time you need to use shims is for plug-ins (like with Google Earth).
z-index（尤其是在 Internet Explorer 7 中）对我来说确实不起作用。 我尝试了许多不同的高低地图 z 索引组合，但没有任何乐趣。到目前为止，对我来说最简单/最快的答案是重新安排我的标记/CSS，使我的弹出/翻转在标记上方/之前我的地图中列出（字面意思是在 < code>
z-index保持默认值 (auto) 并继续我的网络应用程序更重要的方面；）希望这有帮助！
z-index(especially in Internet Explorer 7) really didn't work for me. I tried many different combination's of high vs. low map z-indices but had no joy.By far the simplest/quickest answer for me was to re-arrange my mark-up/css to have my flyouts/rollovers listed in the mark-up above/before my map (literally, before the
<div id="map">), this way I could let thez-indexremain default (auto) and move on to more important aspects of my webapp ;)Hope this helps!
IE 给出了这个问题，
每个包含在相对定位 div 中的 div 都会在 IE 中启动一个新的 z-index。 IE 解释外部相对 div 的方式是按照 html 的顺序排列的。 最后定义的位于顶部。 无论相对定位的 div 内的 div 的 z 索引是多少。
IE解决方案：在html中定义最后应该在顶部的div。
（所以z-index在IE中确实有效，但仅限于每个持有者div，每个持有者div独立于其他持有者div）
IE gives the problem
every div that is wrapped in a relative positioned div will start a new z-index in IE. The way IE interprets the outer relative divs, is in order of html. Last defined is on top. No matter what the z-indexes of the divs inside the relative positioned divs are.
Solution for IE: define the div that should be on top at last in html.
(So z-index does work in IE, but only per holder div, every holder div is independent of other holder divs)
将地图包装在 DIV 中，为该 DIV 指定 z-index 1。将下拉菜单包装在 DIV 中，并为其指定更高的值。
Wrap the map in a DIV, give that DIV a z-index of 1. Wrap your drop-down in a DIV and give it a higher value.
尝试将菜单 z-index 设置得非常高。 显然 Google 地图使用的范围是从 -9000000 到 9000000。
Try setting your menu z-index insanely high. Apparently Google Maps uses a range from -9000000 to 9000000.
如果您的菜单包含在 div 容器中，例如
#menuWrap，则为其分配相对位置并为其指定较高的 z-index...例如，确保您的地图位于 div 内
If your menu is wrapped in a div container e.g.
#menuWrapthen assign it position relative and give it a high z-index.... e.g.Make sure your map is inside a div
地图已经包装在 div 内。 给它一个负的 z 索引，它就可以工作了 - 但有一个警告：gmaps 控件不可点击。
The map is already wrapped inside a div. Give it a negative z-index and it works - with one caveat: the gmaps controls aren't clickable.
请注意，某些浏览器（ahemIE*ahem）中的下拉菜单根本无法进行 zPositioned。 如果您想将某些内容放置在下拉列表上方，则需要使用“iframe shim”来遮盖它或完全隐藏下拉列表。 请参阅：http://clientside.cnet.com/wiki/ cnet-libraries/02-browser/02-iframeshim
Note that dropdown menus in some browsers (ahemIE*ahem) cannot be zPositioned at all. You'll need to use an "iframe shim" to obscure it or hide the dropdown entirely if you want to position something above it. See: http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim
如果您的问题发生在 Internet Explorer 中，但它在 FireFox 或 Safari 中以您期望的方式呈现，此链接对我解决类似问题非常有帮助。
它似乎可以归结为将元素标记为“position:relative;”的想法。 CSS 中的 导致 IE6 和 7 以不直观和反规范的方式扰乱其相对于 HTML 文档中位于其之前的其他元素的 z 索引。 据说 IE8 的行为“正确”，但我自己还没有测试过。
如果您的问题与
If your problem happens in Internet Explorer, but it renders the way you'd expect in FireFox or Safari, this link was extraordinarily helpful for me with a similar problem.
It appears to boil down to the idea that marking an element as "position:relative;" in CSS causes IE6&7 to mess with it's z-index relative to other elements that come before it in the HTML document, in unintuitive and anti-spec ways. Supposedly IE8 behaves "correctly" but I haven't tested it myself.
Anutron's advice is going to be really helpful if your problem is with a
<SELECT>form element, but if you're using JavaScript to manipulate divs or uls to act like a drop down I don't think it's going to help.