链接和Z索引

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内容不可见。 它应该在高度为50px的#navBar下面。 因此，将#headerBar的顶部偏移设置为50px

#headerBar {
top:50px;
}

小提琴

链接和Z索引

问题描述

2 个解决方案

解决方案1
2 2013-03-21 05:17:09

解决方案2
1 2013-03-21 05:16:14

链接和Z索引

问题描述

2 个解决方案

解决方案1 2 2013-03-21 05:17:09

解决方案2 1 2013-03-21 05:16:14

解决方案1
2 2013-03-21 05:17:09

解决方案2
1 2013-03-21 05:16:14