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-index设置内容，并给它一个margin-top：-100px来显示标题上方的内容div的一部分，如此截图（如下所示）。我还给ul＃top-nav一个比#content更大的z-index，但没有运气。

enter image description here

当我将鼠标悬停在链接（关于，访问，志愿者等等）上时，我想显示一个下拉菜单，但它们显示在内容div后面。我知道这是因为内容div的z-index比标题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并进行适当的样式设置即可。

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

3 个答案: