我遇到了一个滚动效果的问题,我不能让链接在标题内工作,因为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;
}
小提琴