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

尝试在使用 z-index 滚动时将固定导航栏隐藏在封面图像后面

Trying to hide fixed navigation bar behind cover image while scrolling with z-index

css

z-index

css-position