尝试在使用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/>