时间戳

首页 > 解决方案 > 如何使用绝对导航栏和相对图像修复 z-index？

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

问题描述

所以，我试图有一个绝对定位的导航栏，堆叠在图像的顶部，我希望它设置为导航在滚动时变为纯色背景，但我遇到的问题是z-索引。导航只是拒绝堆叠在相对位置的图像上。这两个项目在 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>

标签： htmlcssnavigationpositionz-index

解决方案

将此添加到您的导航 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>

推荐阅读