web-dev-qa-db-ja.com

Bootstrap他の要素の背後に表示されるドロップダウンメニュー-IE7

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およびその他の最新の頭痛のないブラウザ： enter image description here

IE7> :(
enter image description here

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>
cssinternet-explorertwitter-bootstrapinternet-explorer-7
52
Leon Gaban

それは スタッキングコンテキスト issue！

ドロップダウンでz-indexを使用している場合でも、同じスタックコンテキストの要素にのみ関連します。これを機能させるには、z-indexとpositionを親要素に追加する必要があります。この場合、header-topdivをお勧めします

78
Blake Plumb

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;
}
20
Adrift

（他の回答で述べたように）親要素のz-indexを増やしてもうまくいかない場合は、親要素の1つに"overflow：hidden;"を削除してみてください。動作するか確認してください。

9
el3ati2

オーバーフローを継承または可視として作成します。

問題を解決します。

overflow: visible !important;

私にとってはすばらしかった

3
Ronak Bokaria

最新バージョンのUI-Bootstrap libで「 append-to vs. append-to-body vs. inline example 」を確認してください。

2
tiago

メニューCSSを追加することで解決します。

position: relative;
z-index: 10000;
0
ganesh pandey