如何确保元素位于页面中所有其他元素之上？

Question

我有2个元素：下拉菜单和图片幻灯片。

动画是使用jquery完成的。

我遇到的问题（仅在IE7中）是图片幻灯片裁剪下拉菜单。

我需要下拉菜单位于图片幻灯片之上。

在css中，我将下拉菜单主 div 设置为：z-index: 9999和图片幻灯片主 div < / strong> to：z-index: 1

我类似的问题，这将是修复，但不是在这种情况下。我该怎么办？

Answer 1

z-index 使用位置

也使用位置 像

 z-index:9999,
position:absolute

Answer 2

位置：绝对;对于下拉列表将做到这一点

Answer 3

z index仅在您同时提供position选项（绝对，相对，固定）

时才有效

较旧的IE还要求父母获取z-index来纠正它。在下面的示例中，您需要没有id的div，这在示例中是最高的。 如果这不是一个选项，那就去寻找下一个最好的东西（例子中的div＃2）

<div>
    <div id="1" />
    <div id="2">
        <nav>Your menu</nav>
    </div>
    <div id="3" />
</div>

Answer 4

请务必彻底了解z-index的堆叠上下文：

• CSS 2.1 w3c, Appendix E. Elaborate description of Stacking Contexts
• Which CSS properties create a stacking context? (accepted answer)
• Detailed Look at Stacking in CSS

Answer 5

创建了jsfiddle here

如果你没有幻灯片显示的z-index，事情应该正常。如果您有幻灯片显示的z-index，请告诉我。

#dropdown {
    background-color:red;
    position:relative;
}

#dropdown .body {
    display:none;
    position:absolute;
    background-color:green;
    top:10px;
    left:0;
}

#dropdown.hover .body {
    display:block;
}


#slideshow {
    background-color:blue;
    height:300px;
}