为什么我的下拉菜单会在我的幻灯片后面显示？

Question

我希望那里的某个人可以看一眼我的页面并且可能会告诉我如何让我的下拉显示在我的幻灯片之上？将鼠标悬停在“质量”上以获取菜单，并注意它位于png后面。这显示在IE上，但在Chrome / FF中效果很好。

http://molded.jasonscms.com/Home.aspx

感谢您的任何提示！

Answer 1

为父div提供比子div更高的z-index，并使父div的位置为：absolute和子div的位置：absolute

像这样：

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

    </div>
</div>

IE9 +中不存在此错误

Answer 2

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

你不应该以这种方式对菜单的内部元素做任何事情，主容器会照顾它。

Answer 3

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

Answer 4

这是因为我的浏览器处于兼容模式，我将其删除并且渲染得很好。

Answer 5

只需在ur div标签上添加属性 - 它对我有用 CSS：     #iefix {     位置：相对;     的z-index：1000;}

Answer 6

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

按照样式提供菜单的父DIV：

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

它应该做一个技巧，但是z-index必须比父div更多的子div的任何其他z-index。