0

我遇到了滚动效果问题，我无法让链接在标题中工作，因为z-index效果必须是负面的才能起作用。链接在标题中。

编辑对不起，我不够清楚，标题区域（绿色）中的链接不活动，因为 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;
}
4

2 回答 2

2

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

如果这是您想要的效果，则为“headerBar”div 指定边距或填充，这将允许您将链接推送到“navBar”下方。

于 2013-03-21T05:17:09.027 回答
1

实际上#navBar 与#headerBar 重叠，因此#headerBar 内容不可见。它应该低于高度为 50px 的 #navBar。所以将 #headerBar 的顶部偏移设置为 50px

#headerBar {
top:50px;
}

小提琴

于 2013-03-21T05:16:14.427 回答