Links and Z-Index



我遇到了一个滚动效果的问题,我不能让链接在标题内工作,因为z-index必须是负面的效果才能工作。链接在页眉。

EDIT对不起,我不够清楚,标题区域的链接(绿色)不活跃,因为z-index属性给标题区域一个负索引,它使链接不活跃,所以我想知道它的修复

http://jsfiddle.net/ThAv5/4/

HTML:

<body>
<div id="container">
    <div id="navBar"></div> 
    <div id="headerBar"></div>
    <div id="mainContent"><h1>This is the main content</h1></div>
</div>
</body>

和CSS:

#navBar{
    position:fixed;
    top: 0;
    left:0;
    width: 100%;
    z-index:1000;
    -moz-box-shadow: 0 0 5px #000000;
    -webkit-box-shadow: 0 0 5px #000000;
    box-shadow: 0 0 5px #000000;
    background:red;
    height:50px;
}
#headerBar{
    top: 0;
    height: 250px;
    left: 0;
    right: 0;
    margin:0px auto;
    width:100%;
    position: fixed;
    z-index:-1000;
    background:green;
}
#mainContent{
    overflow: auto;
    z-index: 0;
    margin-top: 250px;
    width:100%;
    height:900px;
}
body, #container{
    background:yellow;
}

由于您提供的代码中没有链接,我假设链接位于"headerBar"div中。如果是这种情况,您无法单击它们,因为它们将显示在"navBar"div下,因为您提供的样式。

如果这是你想要的效果,那么为"headerBar"div指定一个边距或内边距,这将允许你将链接推到"navBar"的下方。

实际上#navBar与#headerBar重叠,所以#headerBar内容是不可见的。它应该位于#navBar的下方,高度为50px。设置#headerBar的顶部偏移量为50px

#headerBar {
top:50px;
}

小提琴

最新更新