试图隐藏固定导航条后面的封面图像，而滚动与z-index

Question

我有2个导航条，1个是固定的，其他不是。固定导航条之后是一个封面图像。我想要固定导航条在它后面，直到它结束。但是当我使用z-index: -1;时，我将无法点击它…如果我在封面部分和静态导航条上使用z-index: 10，并为固定导航条使用更高的索引，那么我就得不到我想要的结果。

css:

#fixed-nav {
    position: fixed;
    z-index: -1 OR 9;
}
/** STATIC navigation **/
#top-nav {
    z-index:10
}
/** COVER header **/
#cover {
    background-image: url(../img/cover.jpg);
    height: 100%;
    background-size: cover;
    z-index: 10;
}
/* content after cover picture */
.content {
    width: 100%;
    height: 2000px;
}

标记:

<header id="fixed-nav" class="navigation">
    <nav>
        ...
    </nav>
</header>
<header id="top-nav" class="navigation">
    <nav>
        ...
    </nav>
</header>
<header id="cover">
</header>
<div id="wrapper">
<div class="content">
</div>

Answer 1

你需要position: absolute;覆盖

#fixed-nav {
    position: fixed;
    z-index:  1;
    font-size: 30px;
    
}
/** STATIC navigation **/
#top-nav {
    
    font-size: 30px;
   
}
/** COVER header **/
#cover {
    background-image: url(http://i.kinja-img.com/gawker-media/image/upload/s--Y4iAgmph--/1282803868846423983.jpg);
    height: 100%;
    min-height: 100%;
    background-size: cover;
    z-index: 3;
    position: absolute;
    width: 100%;
}

<header id="top-nav" class="navigation">
    <nav>
       <a href="google.com">not fixed</a>
       <a href="google.com">not fixed</a>
       <a href="google.com">not fixed</a>
    </nav>
</header>
<header id="cover">
</header> 
<header id="fixed-nav" class="navigation">
    <nav>
        <a href="twitter.com">fixed nav bar</a>
        <a href="twitter.com">fixed nav bar</a>
        <a href="twitter.com">fixed nav bar</a>
    </nav>
</header>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>