如何使用绝对导航栏和相对图像修复 z-index？

Question

所以，我正在尝试有一个绝对定位的导航栏，堆叠在图像的顶部，我希望它设置为使导航在滚动时变为纯色背景，但问题是我运行进入 z-index。导航只是拒绝堆叠在相对定位的图像上。这两个项目在 html 中也是同级元素，因此父元素遮盖子元素应该没有问题。

nav {
  text-align: right;
  width: 100%;
}

nav ul li {
  position: absolute;
  top: 0;
  z-index: 100;
}

nav li {
  display: inline;
  width: 100%;
}

li {
  list-style-type: none;
  width: 100%;
  padding: 5px;
}

#hero-image {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  z-index: -1;
  position: relative;
}

<nav id="top-nav">
  <ul class="nav-list">
    <li class="nav-item">Home</li>
    <li class="nav-item">Course Catalog</li>
    <li class="nav-item">Products &amp; Services</li>
    <li class="nav-item">About</li>
    <li class="nav-item">Contact</li>
  </ul>
</nav>

<img id="hero-image" src="https://res.cloudinary.com/spacecatind/image/upload/v1568288870/The%20Line%2C%20LLC/tower-sunset_qtqa0q.jpg"></img>

Answer 1

将此添加到您的导航css

  position: absolute;
  top: 0;
  z-index: 100;

它不起作用的原因是，您正在制作内部 li 项 position:absolute

而不是这样做，让父导航 position:absolute

nav {
  text-align: right;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 100;
}

nav ul li {
  
}

nav li {
  display: inline;
  width: 100%;
}

li {
  list-style-type: none;
  width: 100%;
  padding: 5px;
}

#hero-image {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  z-index: -1;
  position: relative;
}

<nav id="top-nav">
  <ul class="nav-list">
    <li class="nav-item">Home</li>
    <li class="nav-item">Course Catalog</li>
    <li class="nav-item">Products &amp; Services</li>
    <li class="nav-item">About</li>
    <li class="nav-item">Contact</li>
  </ul>
</nav>

<img id="hero-image" src="https://res.cloudinary.com/spacecatind/image/upload/v1568288870/The%20Line%2C%20LLC/tower-sunset_qtqa0q.jpg"></img>

Answer 2

尝试使用图像作为背景，然后在 <div> </div> 中使用 nav 标签，现在正如您所说，将其作为绝对值，然后给出位置。这样你就会得到你想要的。

如何使用绝对导航栏和相对图像修复 z-index？

How do I fix the z-index with an absolute nav bar and a relative image?

html

css

navigation

position

z-index