css - ネストされたdivのz-indexを変更します

Question

Webページに固定ヘッダーdivと固定サイドバーdivがあります。メニューの高さを超えて影が広がります。メニューシャドウがリンクと重なる場合、それらは部分的にのみホバー可能です。リンクのz-indexを変更する方法が見つかりません。誰かが私を助けることができますか？

例： http： //jsfiddle.net/Kf6Fw/2/

Answer 1

これを装着z-index: 6; position: relative;する#topと、影を越えますが、影も失われます。

リンクを下に移動することをお勧めします。リンクの上に影を付けるのは、とにかく使い勝手が良くありません。

Answer 2

それを解決する1つの方法は、＃topの周りに別のdiv、＃top-wrapを追加することです。

<div id="side">
    <div id="top-wrap">
        <div id="top">
            <a href='#'>Dictionary</a>
            <a href='#'>Comments</a>
        </div>
    </div>
</div>

したがって、＃menu_allよりも低いz-indexで設定できます。

#top-wrap
{
    height:50px;
    width:100%;
    background-color:green;
    margin-top:75px;
    font-size:20px;
    z-index:4;
}

#top
{
    position:relative;
    z-index:6;
}