谷歌地图，Z索引和下拉Javascript菜单

问题描述：

我今天在一个小问题上运行：我有一个JS下拉菜单，当我插入GoogleMap时...菜单显示在Google Map后面...关于如何机会Google Map的z索引的任何想法？谷歌地图，Z索引和下拉Javascript菜单

谢谢！

答

如果您的问题在Internet Explorer中发生，但它使你在Firefox或Safari浏览器，this link想到对我来说非常有帮助的有similar problem的方式。

它似乎归结为标记元素为“position：relative;”的想法在CSS中导致IE6 & 7以相对于HTML文档中其它元素的z-index，以不直观和反规范的方式混乱。假设IE8的行为“正确”，但我没有自己测试过。

如果您的问题与<SELECT>表单元素相关，但Anutron的建议会非常有帮助，但如果您使用JavaScript来操纵div或uls以像下拉菜单那样操作，我认为这不会有帮助。

这是一篇非常有用的文章。谢谢！ – 2010-01-18 17:57:40

答

尝试设置你的菜单z-index疯狂地高。 Apparently谷歌地图使用从-9000000到9000000的范围。

菜单内置在模板中...我不确定我能控制它。这就是为什么我要求改变Google Map的z-Index的方法 – ebarrera 2008-09-17 19:49:38

答

将地图包裹在DIV中，为DIV指定z-index 1.将您的下拉列表包装到DIV中并给它一个更高的值。

答

请注意，某些浏览器中的下拉菜单（ahem IE * ahem）根本无法定位。如果您想在其上方放置某些内容，则需要使用“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

答

IE给出了问题

每一个被包裹在一个相对定位的div将开始在IE中一个新的z-index DIV中。 IE解释外部相对div的方式按html顺序排列。最后定义在最上面。无论相对定位的div内的div的z索引是什么。

IE的解决方案：定义最后应该在html上的div的div。

（所以z索引不工作在IE浏览器，但只有每架格，每个格架是独立于其他持有人的div）

答

z-index（尤其是在Internet Explorer 7）真的没有为我工作。我尝试了很多不同的高低地图Z指数组合，但没有喜悦。

到目前为止最简单的/最快的答案对我来说是重新安排我的加价/ CSS让我的弹出按钮/翻转的加价上面列出/前我的地图（字面来理解，<div id="map">前），这样我可以让z-index保持默认（auto），并继续我的web应用程序的更重要的方面;）

希望这有助于！

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

答

无需为地图和菜单设置z-index。如果您只是将菜单的z-index设置为高于地图，则不一定有效。

将地图div的z索引设置为-1。现在，菜单将下拉并显示在地图上.........但如果您使用的是包装器，则地图将不再是交互式的，因为它现在位于包装器后面。

要解决此问题，请在包装div中使用onmouseover和onmouseout函数。确保它们在你的包装div中，而不是你的地图div。

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

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

答

我创建了谷歌风格的下拉列表，并有同样的问题...使用谷歌地图API第3，您只需创建一个控制和使用其放置在地图上：

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

由于它是一个下拉菜单，只要确保包含div的z-index最高（z = 3），那么包含菜单项的下拉部分就会低于包含div（z = 0）。

这里是example。

从我的经验来看，您需要使用垫片的唯一时间就是插件（就像Google Earth一样）。

答

我发现有时无意中忽略了声明！doctype在IE中会导致这种打嗝，当其他浏览器似乎能够协商好页面时。

谷歌地图，Z索引和下拉Javascript菜单

相关推荐