gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 07:46:35 25 4
gpt4 key购买 nike

我有 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>

最佳答案

你需要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/>

关于css - 尝试在使用 z-index 滚动时将固定导航栏隐藏在封面图像后面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30663630/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com