[英]Can't hide fixed navbar with z-index
我正在嘗試創建一個效果 - 想象一個固定的全屏圖像,它將隱藏在滾動(視差)上的內容div下面。 此外,我希望導航欄不會滾動,因此它是固定的。 但是我希望導航欄在滾動時一直隱藏在內容div下面。
因此我嘗試使用z-index
,但沒有成功。 不知怎的,我無法隱藏內容div下面的固定導航欄。
標題:
<div class="container-fluid position-fixed">
<div class="row m-0 w-100">
<div class="col-2 justify-content-center d-flex offset-5">
<a class="align-self-center" routerLink="">
<h1>NØREBRO STUDIOS</h1>
</a>
</div>
<div class="col-5 pl-5">
<ul class="nav justify-content-start">
<li class="nav-item mr-5">
<a class="nav-link" routerLink="cases">Work</a>
</li>
<li class="nav-item mr-5">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
CSS:
.container-fluid {
z-index: 1;
background-color: transparent;
padding: 3em 0em;
}
內容(上層容器應該在滾動時隱藏標題):
<div class="container-fluid px-0">
<app-transparent-header></app-transparent-header>
</div>
<div class="front-image min-vh-100 min-vw-100">
</div>
<div class="container-fluid upper-container">
...
CSS:
.front-image {
background-image: url("/assets/images/savum/savum-front.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.upper-container {
padding: 15em 15em 0em 15em;
background-color: blue;
}
.container-fluid {
z-index: 9999;
}
如果我理解正確,您希望隱藏標題但是您希望在滾動時將導航欄固定在屏幕頂部:
.nav-parent {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 999;
}
在導航欄上設置父類,並為其分配這些值
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.