使用定位下拉菜单在更高的div z-index上前进z-index

Question

我有三个div：页眉，内容，页脚

<div id="header">
 <ul id="top-nav">
  nav links & sub menus
 </ul>
</div>

<div id="content">
 .. content
</div>

<div id="footer">
 .. footer links
</div>

我设置了具有较大z索引的内容，并为其设置了margin-top：-100px，以在标题上方显示内容div的一部分，如下面的屏幕快照所示。 我还给ul＃top-nav提供了比#content更大的z-index，但是没有运气。

将鼠标悬停在链接（“关于”，“访问”，“志愿者”等）上时，我想显示一个下拉菜单，但是它们显示在内容div的后面。 我知道发生这种情况是因为内容div的z索引大于标头div，但是当您将鼠标悬停在链接上时是否可以在内容div上显示导航？

Answer 1

z-index仅适用于定位的元素。 在这种情况下，您无需为任何内容设置z-index 。

将菜单项及其子菜单放在某些框中。 在位置上使用:hover规则position: relative; 。

小提琴示例： http : //jsfiddle.net/8Ghsm/

Answer 2

如果我的问题正确，请参见下面的提琴

小提琴： http : //jsfiddle.net/xvdfD/8/

演示： http ： //jsfiddle.net/xvdfD/8/embedded/result/

CSS：

    #header
{
    background:#999;
    height:100px;
}

#content {
    background:#ccc;
    height:100px;
    z-index:100;
    margin-top:-98px;
    border:1px solid magenta;
    color:#6F6;
}
#footer {
    background:#999;
    height:100px;
}
ul#navigation-1 {
    margin:0;
    padding:1px 0;
    list-style:none;
    width:100%;
    height:21px;
    border-top:1px solid #b9121b;
    border-bottom:1px solid #b9121b;
    font:normal 8pt verdana, arial, helvetica;
}
ul#navigation-1 li {
    margin:0;
    padding:0;
    display:block;
    float:left;
    position:relative;
    width:148px;
}
ul#navigation-1 li a:link, ul#navigation-1 li a:visited {
    padding:4px 0;
    display:block;
    text-align:center;
    text-decoration:none;
    background:#b9121b;
    color:#ffffff;
    width:148px;
    height:13px;
}
ul#navigation-1 li:hover a, ul#navigation-1 li a:hover, ul#navigation-1 li a:active {
    padding:4px 0;
    display:block;
    text-align:center;
    text-decoration:none;
    background:#ec454e;
    color:#ffffff;
    width:146px;
    height:13px;
    border-left:1px solid #ffffff;
    border-right:1px solid #ffffff;
}
ul#navigation-1 li ul.navigation-2 {
    margin:0;
    padding:1px 1px 0;
    list-style:none;
    display:none;
    background:#ffffff;
    width:146px;
    position:absolute;
    top:21px;
    left:-1px;
    border:1px solid #b9121b;
    border-top:none;
}
ul#navigation-1 li:hover ul.navigation-2 {
    display:block;
}
ul#navigation-1 li ul.navigation-2 li {
    width:146px;
    clear:left;
    width:146px;
}
ul#navigation-1 li ul.navigation-2 li a:link, ul#navigation-1 li ul.navigation-2 li a:visited {
    clear:left;
    background:#b9121b;
    padding:4px 0;
    width:146px;
    border:none;
    border-bottom:1px solid #ffffff;
    position:relative;
    z-index:1000;
}
ul#navigation-1 li ul.navigation-2 li:hover a, ul#navigation-1 li ul.navigation-2 li a:active, ul#navigation-1 li ul.navigation-2 li a:hover {
    clear:left;
    background:#ec454e;
    padding:4px 0;
    width:146px;
    border:none;
    border-bottom:1px solid #ffffff;
    position:relative;
    z-index:1000;
}

Answer 3

我建议您将“标题”设置为主体背景图片-这样，您就不会在导航或内容之间遇到z-index问题。 只要使div达到所需的高度即可。

只需将导航放入实际的标题div中并对其进行适当样式设置即可。