css - 効かない - z-index 最前面




IE7のZインデックスの問題-コンテキストメニュー (3)

IE7までのIEは、スタッキングコンテキストを決定するために、最も近い位置にある祖先を使用します。 あなたはIE6でもそれを見ていますか?

ulの後ろにあなたのボタンを置き、それを試してみてください。

関連するコンテキストメニューを持つ次のボタンがあります

    <div class="control-action"> 
        <button>Action</button> 
        <ul style="display:none">
            <li class="action-remove">Remove</li>
            <li class="action-detail">Detail</li>
            <li class="action-assigned">Assign</li>
        </ul>
    </div> 

ボタンをクリックすると、関連するulがコンテキストメニューとしてその下に表示されます。

これはIE 7以外のすべてのブラウザでうまくいっています。IE7では、コンテキストメニュー(ul)がその下にあるボタンの下に表示されます。 私は、これがスタッキングコンテキストがこれらの要素を解決する方法に起因すると考えています。

私のCSSは現在次のようになっています:

.control-action
{
    position: relative;
    text-align:right;
    width:100px;    
}

.control-action ul
{
    position:absolute;
    z-index: 10000;
    list-style:none;
}

私が間違ってやっていることについてのどんな考えですか?


私は要素の順序を変更することでこれを解決しました。 私はボタンとメニューの両方を含むことから相対位置要素を削除し、それをメニューの親だけにしました。

    <div class="control-action" style="float:right"> 
        <div class="control-action-menu">
            <ul style="display:none">
                <li class="action-remove">Remove</li>
                <li class="action-detail">Detail</li>
                <li class="action-assigned">Assign</li>
            </ul>
        </div>
        <button>Action</button> 
    </div> 

このマークアップの変更により、cssは次のように変更されました。

.control-action
{
    text-align:right;
    width:100px;    
}

.control-action-menu
{
    position:relative;
    z-index:1;
}

.control-action ul
{
    position:absolute;
    z-index: 10000;
    list-style:none;
}





internet-explorer-6