首页 文章

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

提问于
浏览 次
2

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

<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以显示 Headers 上方的内容div的一部分，如此屏幕截图所示（如下所示） . 我还给ul＃top-nav一个比#content更大的z-index，但没有运气 .

enter image description here

当我将鼠标悬停在链接（关于，访问，志愿者等等）上时，我想显示一个下拉菜单，但它们显示在内容div后面 . 我知道这是因为内容div的z-index比 Headers div大，但是当你将鼠标悬停在链接上时，是否可以在内容div上显示导航？

html css z-index

3 回答

  • 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;
}
    回复于
  • 0

    我建议您将“ Headers ”设置为正文背景图像 - 这样您就不会遇到导航或内容之间的z-index问题 . 只需使div成为他们需要的高度 .

    只需将导航放入实际的 Headers div并适当地设置样式 .

    回复于
  • 3

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

    将菜单项及其子菜单放在某个框中 . 对 position: relative; 使用 :hover 规则 .

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

    回复于

相关问题