谷歌地图，Z指数和降Javascript菜单

Question

我遇上一个小小的问题：我有一个JS下拉菜单，当我插入一个GoogleMap...菜单呈现身后的谷歌地图...任何想法，如何机会z指数的谷歌地图呢？

谢谢！

Answer 1

如果你的问题发生在互联网资源管理器，但它呈现的方式，你会期望在火狐或野生动物园， 这个链接 是非常有助于我 类似的问题.

它的出现要归结到的想法，标志着一个元件"的位置：相对的；"在CSS原因IE6和7惹这是z-指数相对于其他因素来之前，它在HTML文档，直观的和防范方式。据说IE8的行为"正确"但我没有测试过它自己。

Anutron的建议将是非常有益的，如果你的问题是与一个 <SELECT> 形成元素，但是如果您使用的JavaScript操纵div或承载像一下我可不认为这会有帮助。

Answer 2

注意到下拉菜单，在某些浏览器(啊哈即*咳)不能zPositioned。你只需要使用一个"框架垫片"，以掩盖或隐藏拉完全如果你想要的位置上面的东西。参见： http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim

Answer 3

地图，已经包裹内div。给它一个负z指数和它的工作原理-的一个警告：该允许你搜索的控制是不可点击。

Answer 4

如果你的菜单是包裹在一个长容器例如 #menuWrap 然后分配给它的相对位置并给它一个高z索引。...例如

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

确保你的地图是内部div

Answer 5

试图设置你的菜单z指数极高。 显然 谷歌地图的使用范围从-9000000到9000000.

Answer 6

包裹的地图在一个部，给该部z指数是1。包你落下，在一个DIV，并给它一个更高的价值。

Answer 7

即使问题

每div被包裹在一个相对位于div将开始一个新的z指数在即。该方式即解释外相对div，是为了html。最后一个定义是上。无论什么z-索引的div内的相对位于div。

解决方案，即：定义div，应该在顶部，最后在html。

(么z-索引的工作，在即，但只有每架div，每架div是独立于其他持div)

Answer 8

z-index (尤其是在互联网浏览器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>

Answer 9

我创建了一个谷歌风格拉下来，并有同样的问题...用V3api谷歌地图，你只需要创建一个控制并将其放置在地图上使用：

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

由于它是一个拉下来，只是确保z指数的含div是最高的(z=3)然后下部分包含的菜单项下的含有div(z=0).

这里有一个 例.

从我的经验，只有时你需要利用填充的是插件(如与谷歌地球)。

Answer 10

没有必要设置z指数对双方的地图和单。如果你只是设置z指标菜单在高于地图上，它并不一定会的工作。

设置z指数的地图div为-1。现在菜单将下降和显示的地图。........但是如果您使用的包装然后在地图上将不再是互动的，因为它现在是背后的包装。

要解决这个问题，可以使用onmouseover和onmouseout功能在你的包装div。确保这些都在你的包装div并不是你的地图div。

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

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

Answer 11

我发现，有时无意地忽视声明的!doctype将导致这种打嗝在即，当其他浏览器，似乎是能够通过谈判页罚款。