无法使用 z-index 隐藏固定导航栏答案

【问题标题】：Can't hide fixed navbar with z-index无法使用 z-index 隐藏固定导航栏
【发布时间】：2019-06-16 07:50:26
【问题描述】：

我目前正在尝试创建一种效果 - 想象一个固定的全屏图像，将隐藏在滚动（视差）的内容 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;
}

【问题讨论】：

标签： html css

【解决方案1】：

如果我理解正确，您希望隐藏标题，但希望在滚动时将导航栏固定在屏幕顶部：

.nav-parent { 
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 999;
}

在导航栏上设置父类，并为其分配这些值

【讨论】：