html - 如何让 z-index 工作，它拒绝玩球

Question

我希望拥有它，以便当您将鼠标悬停在导航栏上时，下拉菜单位于主要内容的上方/顶部，但是当菜单下拉时，它会将主图像向下推而不是像我期望的 z-index 属性那样位于顶部。

我已将导航 div 设置为 relative 并将主要部分 div 设置为 relative 但仍然没有任何乐趣!

请问有人能帮忙吗？

<div id="top-bar-container">
  <img src="img/MSO-logo.jpg" alt="MSO Digital Agency" />
  <i id="hamburger-icon" class="fas fa-bars fa-2x"></i>
  <nav id="nav-bar">
    <ul id="test">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li>
        <a href="#">Services</a>
        <ul>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Branding</a></li>
          <li><a href="#">Consulting</a></li>
          <li><a href="#">SEO</a></li>
        </ul>
      </li>
      <li><a href="#">Our Work</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</div>

<div id="main-section">
  <img id="main-img" src="img/main-image.png" alt="" />
</div>


#top-bar-container {
  background-color: #ec671c;
  width: 100%;
  height: 75px;
}

#nav-bar {
  width: 75%;
  float: right;
  padding-right: 50px;
  position: relative;
  z-index: 1;
}

ul {
  list-style: none;
  padding: 0;
  float: right;
}

ul li {
  float: left;
  width: 90px;
  list-style: none;
  margin-top: 10px;
  text-align: center;
  padding: 5px;
}

ul li:hover {
  background-color: #ec671c;
  border-radius: 5%;
}

ul li a {
  text-decoration: none;
  color: white;
}

ul li a:hover {
   color: orange;
}

ul li ul {
  line-height: 25px; 
}

ul li ul li {
  display: none;
  font-size: 13px;
}

ul li ul li a {
  color: white;
}

ul li:hover ul li {
  display: block;
  padding: 0px;
}

#hamburger-icon {
  display: none;
  color: white;
  position: absolute;
  right: 20px;
   top: 20px; 
}

#hamburger-icon:hover {
  color: orange;
}

#main-section {
  width: 100%;
  height: 100vh;
  position: relative;
}

#main-img {
  width: 100%;
  height: 100vh;
}

Answer 1

#main-section 被下推，因为下拉菜单位于文档流中。

当它没有悬停时，它有 display: none 将它从 DOM 中取出。悬停时，它会切换到 position: block 并将其放回原位 - 它会占用空间，并将主要内容向下推。

您可以通过默认添加所需的最终结果 display: block 来测试它，并查看文档在展开状态下的外观。

您需要将 position: absolute 应用到您的下拉列表中，以使其不干扰文档流。您也可以将 z-index: 1 直接移动到它上面，如果那是应该放在最上面的内容 - 或者您可以将它留在父级上，并且应该也能正常工作。 - z-index 不是这里的问题。