时间戳

首页 > 解决方案 > 如何让 z-index 工作，它拒绝打球

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

问题描述

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

我已将导航 div 设置为相对，并将主要部分 div 设置为相对，但仍然没有喜悦！

请问有哪位大侠能帮忙解决下吗？

<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;
}

标签： htmlcss

解决方案

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

#nav-bar {
  width: 75%;
  float: right;
  padding-right: 50px;

}

ul {
  list-style: none;
  padding: 0;
  float: right;
  background-color: #ec671c;

}

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

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;
}

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

}
#top-bar-container >nav >ul > li > ul{
	position:absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>

</style>
</head>
<body>

<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" alt="" />
</div>


</body>
</html>

嗨，您可以在 ul>li{position:relative} 部分中进行操作，另外，放入第二个 UL {position:absolute}

推荐阅读