出现在其他元素后面的引导下拉菜单 - IE7

Posted 2023-03-06

技术标签:

【中文标题】出现在其他元素后面的引导下拉菜单 - IE7【英文标题】：Bootstrap dropdowns menus appearing behind other elements - IE7 【发布时间】：2013-04-15 12:11:23 【问题描述】：

我正在使用 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" /><!-- <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" />
        <!-- <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>

【问题讨论】：

你能试试$('.dropdown-menu').appendTo($("body"));吗？如果它不起作用，你可以尝试另一个类，而不是 .dropdown-menu 但我猜它会解决问题。嗯只是尝试了这两个选项，jquery 没有做任何事情（但打破了非 IE7 下拉菜单），我将 .dropdown-menu 重命名为 .dropdown-menu1 仍然是同样的问题:( 【参考方案1】：

您只能在定位元素（相对、固定/绝对）上使用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;

【讨论】：

【参考方案2】：

这是stacking context 问题！

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

【讨论】：

谢谢！我添加了位置：相对；到一些容器 div，它解决了我的问题 :) IE7 和 8 死得不够快...... 谢谢，在 ios6 上使用 Safari 时遇到了同样的问题。感谢您的提示：堆叠。如果两个元素重叠，则将相对位置放在其父元素上。我也有这个问题，但是我同时使用了位置和z-index，它仍然不起作用我将 style= zIndex:1020,position:'relative' 添加到了我的 React Material UI 的直接父级（在我的情况下为 CardHeader）触发 Popper 的按钮【参考方案3】：

查看最新版本的 UI-Bootstrap 库中的“append-to vs. append-to-body vs. inline example”。

【讨论】：

【参考方案4】：

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