56

我正在使用 Bootstrap 2.3.1 http://twitter.github.io/bootstrap/index.html

所以我使用他们的“下拉菜单”类来创建一些简单的快速使用下拉菜单，但由于某种原因在IE7上它们出现在我网站上的文本和其他元素的后面。

测试链接： http: //leongaban.com/_projects/defakto/CDS/

我在我的 CSS 中添加了 z-index，但似乎仍然没有做任何事情，请帮忙！

.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
    z-index: 10000;
}

IE9、Chrome、FF 等现代不头痛的浏览器： 在此处输入图像描述

IE7 >:(
在此处输入图像描述

HTML

<div class="header-nav">

<ul id="nav-account" role="navigation" class="pull-right">

    <!-- Language Dropdown Button -->
    <li id="language-btn">
        <a href="#" id="drop1" class="dropdown-toggle" data-toggle="dropdown">English</a>
        <img src="img/header-small-down-arrow.png" alt="grey triangle"/><!-- <span class="grey_triangle"></span>-->

        <!-- Language Dropdown Menu-->
        <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">English</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Spanish</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">German</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Japanese</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chinese</a></li>
        </ul>
    </li>

    <!-- User Dropdown Button -->
    <li id="account-btn">
        <a href="#" id="drop2" class="dropdown-toggle" data-toggle="dropdown">Logout</a>
        <img src="img/header-small-down-arrow.png" alt="grey triangle"/>
        <!-- <span class="grey_triangle"></span> -->

        <!-- User Dropdown Menu-->
        <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Logout</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Account</a></li>
        </ul>
    </li>
</ul>
4

7 回答 7

89

它是一个堆叠上下文问题！

即使您z-index在下拉列表中使用，它也仅与同一堆叠上下文中的元素相关。您需要将 az-index和 a添加position到父元素才能使其正常工作。在这种情况下，我会推荐header-top div

于 2013-04-22T20:42:35.750 回答
25

您只能z-index在定位元素（相对、固定/绝对）上使用，因此请尝试添加：

.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
    position: relative;
    z-index: 10000;
}
于 2013-04-22T20:23:11.813 回答
15

如果增加父元素的 z-index（如其他答案中所述）对您不起作用，则可能是父元素之一具有以下属性：

overflow: hidden;

尝试将其更改为：

overflow: visible;

看看它是否有效。

于 2017-07-06T23:46:30.973 回答
5

只需将溢出设置为继承或可见。

它将解决问题。

overflow: visible !important;

它非常适合我

于 2017-10-02T07:15:13.190 回答
2

查看最新版本的 UI-Bootstrap 库中的“追加到正文与内联示例”。

于 2016-03-17T14:23:25.647 回答
1

我在使用时也发生了同样的事情

overflow-x: hidden;

在父元素上。不得不关掉它。

于 2018-01-24T02:46:36.963 回答
0

它通过添加菜单 CSS 来解决。

position: relative;
z-index: 10000;
于 2018-04-10T11:33:41.373 回答