jquery - 为什么我的下拉菜单在 ie 上的幻灯片后面？

Question

我希望那里的人可以偷看我的页面，并可能建议我如何让我的下拉菜单显示在我的幻灯片顶部？将鼠标悬停在“质量”上以获取菜单，并注意它位于 png 后面。这在 IE 上显示出来，但在 Chrome/FF 中效果很好。

感谢您的任何提示！

score 0 · Accepted Answer

给父 div 比子 div 更高的 z-index 并使父 div 的 position:absolute 和子 div 的 position:absolute

像这样：

<div style="position: relative; z-index: 2">
    <div style="position:absolute;z-index: 1;">

    </div>
</div>

顺便说一下，这个错误在 IE9+ 中不存在

score 0 · Accepted Answer

关键部分是使菜单的父级 ( <header>) 具有比它的兄弟容器更高的 z-index，它是幻灯片的父级（您的横幅元素）。整个问题与 IE 如何处理绝对位置元素的 z-index 有关，除非明确设置，否则它会从页面顶部向下增加它们。

您不必以这种方式对菜单的内部元素做任何事情，主容器会处理它。

score 0 · Accepted Answer

尝试一下这个： #div{ background:#fff; //desired background color. You can also try transparent. opacity:0; }

score 0 · Accepted Answer

0

这是由于我的浏览器处于兼容模式，我删除了它并且它呈现得很好。

于 2012-08-18T15:30:32.147 回答

score 0 · Accepted Answer

只需在你的 div 标签上添加属性——它对我有用 CSS：#iefix { position:relative; z-index:1000;}

score 0 · Accepted Answer

是的，这是兼容模式的问题，但您仍然应该知道有些人有意或无意地在兼容模式下运行。这就是为什么你仍然应该解决这个问题。

给菜单以下样式的父 DIV：

#parentDiv{position:relative; z-index:999;}

它应该有一个技巧，但是 z-index 必须大于父 div 的任何其他子 div 的 z-index。

6 回答 6