z-index在IE7中对Google地图和导航子菜单无效

Question

我觉得问题非常显而易见。我正在处理一个客户网站的问题，实际上在我的几个客户网站上都发生了这种情况，但这个问题最明显。IE7不遵守z-index规则。我已经尝试了不同的值，特别是在divs #mapWrapper和#map上。请看这里：http://thepaysongroup.com/wp-content/plugins/hq_idx/searchlistings.php。

我已经做了数十次网络搜索，但找不到任何解决此问题的方法。我也阅读了Aleksandar Vacić关于IE6/7 z-index差异的文章，但仍然没有结果。非常感谢您的帮助，我对此问题感到非常困扰。

- bhamrick

Answer 1

根据我的经验，在IE中，z-index可能会出现问题。将其设置为0尤其是一个问题，因此请确保0不是您的z-index值之一。

有时候最简单的解决方案就是改变HTML的源顺序：在源代码中后面显示的内容会被放置于顶部。在您的情况下是否有这种可能性呢？

- keithjgrant

Answer 2

如果我没记错的话，你不能有两个具有相同 z-index 的元素，否则会出现问题。我注意到你的许多路径都有 1000 的 z-index。一些尝试的想法：

1. 在“伪”层内使 z-index 递增。也就是说，如果您希望所有边界描边位于同一“层”上，则为该层分配介于 1001 和 2000 之间的数字。上面的下一层将使用介于 2001 和 3000 之间的数字，依此类推。

2. 让文档流在几个容器内设置 z-index，并将容器本身设置为相距很远的 z-index。

3. 请注意，在 IE 中，像组合框下拉列表和 ActiveX 控件等元素通常显示在实际页面上方的图层上，因此始终显示在任何 HTML 上方，无论您如何设置 z-index。不是说这是问题，但也许使用地图 API 会触发该问题。在这里阅读更多信息。

- Robusto

---

我一直在尝试调整所有元素的z-index值，但似乎没有任何效果。有一件事让我感到困惑的是，地图插件中的下拉菜单（例如“按搜索”菜单）可以正常工作。我已经克隆了这些菜单的z-index值，但仍然没有任何变化。 - bhamrick

Answer 3

好的，我弄明白了。所以主导航在带有position: relative属性且未定义z-index的div #header中。一旦我在header上放置了z-index，菜单就立即显示在地图前面。

我想这里的教训是要查找每个具有定义位置（无论是绝对还是相对）的元素，以及它如何与相关元素交互。

- bhamrick