0

私は今日IE7z-indexの問題に取り組んでいますが、その根底にあるものを見つけることができません。以下の私のコードは、と呼ばれるdivの上にあるカスタムスタイルのドロップダウンメニューを示していますwrapper_bottom_outer。IE7以外のすべてのブラウザーでは、コードはの上にselect/dropdownクラスを表示するように機能しますwrapper_bottom_outer。ただし、IE7でのみselect、divの背後にdropdown表示されます。wrapper_bottom_outer

私は今日、開発者がIE7とz-indexingで抱えている問題について読みましたが、確かに今日それらを経験しています。

私が行方不明になっていることは明らかですか？問題はスタックコンテキストにありますか？もしそうなら、どうすれば修正できますか？

<div class="select" style="width: 127px;">
    <dl class="dropdown" style="z-index: 2060; width: 127px;">
        ...content in here...
    </dl>
</div>

<div id="wrapper_bottom_outer" style="z-index: 10;">    
    ...content in here...
    <div id="wrapper_bottom"></div>
</div>

#wrapper_bottom_outer {
    height: 195px;
    overflow: visible;
    position: relative;
}

.dropdown {
    position: relative;
    height: 18px;
    float: left;
    font-size: 11px;
    line-height: 12px;
 }

.select {
    position: relative;
}

$("#wrapper_bottom").mouseenter(function(){ 
    $(".select").css('zIndex', '1000');     
    $(".dropdown").css('zIndex', '1001');
    $("#wrapper_bottom_outer").css('zIndex', '1002');
});

$("#wrapper_bottom").mouseleave(function(){
        $(".select").css('zIndex', '2059');
    $(".dropdown").css('zIndex', '2060');
    $("#wrapper_bottom_outer").css('zIndex', '10');
});
4

1 に答える 1

1

Z-indexを使用する場合、z-indexは特定の位置（相対、絶対、固定）にのみ適用可能であることを覚えておく必要があります。

また、配置する実際の要素にz-indexを設定するだけでなく、その親要素にz-indexを追加する必要もあります。

それを試してみて、それがどのように機能するかを見てみましょう。jsfiddleを作成しない場合は、大いに役立ちます：http: //jsfiddle.net/

于 2012-08-08T15:33:50.127 に答える