为什么在 IE7 和 9 中我的图像后面显示 jquery Mega Menu？答案

【问题标题】：Why is jquery Mega Menu showing up behind my images in IE7 and 9?为什么在 IE7 和 9 中我的图像后面显示 jquery Mega Menu？
【发布时间】：2012-03-10 03:12:58
【问题描述】：

我有一个顶部有jquery Mega Menu 的网页，然后在它的正下方有一个jqGrid。当我将鼠标悬停在菜单上时，子菜单会弹出，但它显示在 jqGrid 的“后面”。我尝试进入 dcMegaMenu.css 并添加：

z-index:2000;

这张图片是直接在off of the examples page拍摄的，这个问题是可以重现的

到处都是，但它仍然出现在图像后面？有什么建议吗？

【问题讨论】：

您能否在您的问题中添加一些代码，或者链接到该问题的现场演示？
检查这里...stackoverflow.com/questions/4674834/mega-menu-issues这应该可以解决您的问题。
@xec - 如果这有助于显示菜单在图像后面被截断，我添加了一个屏幕截图
@xec - 我可以在他们的示例页面上重现此内容，因此我添加了来自菜单示例页面的链接和屏幕截图

标签： jquery css jqgrid z-index megamenu

【解决方案1】：

如果没有显示任何代码，我所能想到的就是如果元素没有定位，z-index 将什么都不做：

#wontwork {
  z-index: 10000;
}

#willdosth {
  position: absolute; /* or relative or fixed */
  z-index: 1;
}

#also { /* link below */
  transform: sth;
  z-index: 1;
}

参考：https://developer.mozilla.org/en/Understanding_CSS_z-index
关于transform和z-index的部分：https://stackoverflow.com/a/7765214/137626

【讨论】：

我可以在示例页面上重现该问题，因此我现在在问题中包含指向该页面的链接以及突出显示我看到的问题的屏幕截图

【解决方案2】：

这个问题是由an IE7 bug引起的。从链接的答案中引用自己的话：

[这里是]一些解释问题的资源：

IE 6 & IE 7 Z-Index Problem

IE7 Z-Index Layering Issues

http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

一般的想法是在有问题的元素的父元素上戳position: relative（通常删除它）和z-index，直到它被修复。

在 IE9 中发生同样问题的唯一方法是 IE9 以兼容模式显示页面（或以其他方式使用 IE7 模式）。按 F12 调出开发者工具以查看正在使用的模式。

要在the page you linked to 上修复IE7 中的这个问题，您需要在.demo-container 上添加position: relative; z-index: 1;。

如果您无法将此修复程序翻译到您的实际页面，如果您提供指向实际页面的链接（或准确的测试用例：http://jsfiddle.net//http://jsbin.com/），我可以提供进一步帮助。

这是 IE7 模式下 IE9 的屏幕截图，其中使用开发者工具应用了修复：

【讨论】：

谢谢。 . 。奇迹般有效。 . .有关此菜单 IE 问题的任何想法：stackoverflow.com/questions/9372436/…

【解决方案3】：

它可以使用z-index:1; 解决，但是关于定位元素。正如 w3school.com 所解释的，z-index 只能与定位元素一起使用。因此，如果您将超级菜单的列表项设置在相对位置 position:relative; 并使用 z-index:1; 将起作用。

【讨论】：

【解决方案4】：

通过使用位置：绝对；只需添加一个 z-index:1;因为堆栈顺序较大的元素总是在堆栈顺序较低的元素前面，所以z-index可以用来控制堆栈顺序，它只用于定位元素

【讨论】：