Question

我遇到了滚动效果的问题，我无法在标题中使用链接，因为z-index必须为效果才能生效。链接在标题中。

编辑抱歉，我不够清楚，标题区域（绿色）中的链接未激活，因为z-index属性使标题区域为负索引，使得链接不活动所以我想知道它的解决方法

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;
}

Answer 1

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

如果这是你想要的效果，那么为“headerBar”div指定一个边距或填充，这样你就可以推送“navBar”下方的链接。

Answer 2

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

#headerBar {
top:50px;
}

Fiddle

链接和Z-Index

2 个答案: