css - 更改嵌套 div 的 z-index

Question

我在网页上有一个固定的标题 div 和一个固定的侧栏 div。阴影超出了菜单的高度。当菜单阴影与链接重叠时，它们只能部分悬停。我还没有找到改变链接 z-index 的方法。有人能帮我吗？

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

Answer 1

如果你穿上它z-index: 6; position: relative;，#top它就会越过阴影，但你也会失去阴影。

我建议将链接向下移动 - 让阴影覆盖链接无论如何都不是很好的可用性。

Answer 2

One way of solving it is to add another div, #top-wrap, around #top

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

So you can set the that with a lower z-index than that of #menu_all

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

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