Question

我使用Flickity作为我的图片轮播，下拉菜单一直隐藏在它后面。我试过z-index：1000！important;它仍然没有工作。我一直专注于尝试使用导航CSS修复它，但是我应该尝试使用Flickity CSS修复它吗？

这是我的HTML：

<section class="navigation">
  <div class="nav-container">
    <div class="brand">
      <a href="#!"><img src="img/LOGO.WELK.png" alt=""></a>
    </div>
    <nav>
      <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
      <ul class="nav-list">
        <li><a href="#!">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li>
          <a href="#!">Services</a>
          <ul class="nav-dropdown">
            <li>
              <a href="electrical.html">Electrical</a>
            </li>
            <li>
              <a href="#!">Plumbing</a>
            </li>
            <li>
              <a href="#!">Heating</a>
            </li>
             <li>
              <a href="#!">Generators</a>
            </li>
            <li>
              <a href="#!">Bucket Truck</a>
            </li>
          </ul>
        </li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>
</section>

<section class="portfolio" id="portfolio">
    <div class="wrapper">
      <div class="gallery">
        <div class="galleryItem"><img src="img/electricman.jpg" alt=""></div>
        <div class="galleryItem"><img src="img/electricman.jpg" alt=""></div>
        <div class="galleryItem"><img src="img/LOGO.WELK.png" alt=""></div>
        <div class="galleryItem"><img src="img/LOGO.WELK.png" alt=""></div>
        <div class="galleryItem"><img src="img/LOGO.WELK.png" alt=""></div>
      </div>
    </div>
</section>

我的CSS：

.navigation {
  height: 120px;
  background: white;
  border-bottom: 4px solid $red;
}

// Logo and branding
.brand {
  position: absolute;
  padding-left: 20px;
  float: left;
  line-height: $nav-height;
  text-transform: uppercase;
  font-size: 1.4em;
  a,
  a:visited {
    text-decoration: none;

    img {
        width: 75%;
        padding: 10px 0;
    }
  }
}

// Container with no padding for navbar
.nav-container {
  max-width: $content-width;
  margin: 0 auto;
}

// Navigation 
nav {
  float: right;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      float: left;
      position: relative;
      a,
      a:visited {
        display: block;
        padding: 40px 20px 0 20px;
        line-height: $nav-height;
        background: white;
        color: black;
        text-decoration: none;
        transition: 0.3s all ease;
        text-transform: uppercase;
        letter-spacing: 1px;
    /////////RIGHTHERE

        &:hover {
          color: $red;
          text-decoration: none;
        }
        &:not(:only-child):after {
          padding-left: 4px;
          content: ' +';
        }
      } // Dropdown list
      ul li {
        min-width: 190px;

        a {
          padding: 15px;
          line-height: 20px;
        }
      }
    }
  }
}

// Dropdown list binds to JS toggle event
.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 20;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile navigation */

// Binds to JS Toggle
.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  height: $nav-height;
  width: $nav-height;
}

My Flickity CSS位于单独的文件夹中。

Answer 1

我遇到了类似的问题，请尝试使用z-index: 1;进行导航（必须具有position属性）。

下拉导航前面的图像滑块

1 个答案: