下拉菜单位于固定导航栏下方

Question

我希望菜单在移动设备上越过导航栏，它们对于视口来说往往有点大。我试图在plyr::mapvalues(df1$var1, from = c(2, 3), to = c(3, 2)) #[1] 1 1 3 3 3 3 2 2 2 4 .dropdown-menu和relative上设置该位置但两者都没有成功，并设置absolute并且没有成功。任何建议将不胜感激。它让我很高兴天堂。

z-index: 999

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <a class="navbar-brand active" href="https://www.inplaydesign.com/index.html">d|b</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="https://blog.inplaydesign.com">blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/gallery/gallery.html">gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://shop.inplaydesign.com">shop</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/faq/faq.html">f.a.q.</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact/contact.html">contact</a>
        </li>
      </ul>
      <li>
        <button type="button" class="btn btn-outline-dark btn-sml" data-target="#logOut">
                        <i class="fa fa-power-off"></i> log-out</button>
      </li>
    </div>
  </nav>
</div>

<div class="container carousel-container">
</div>

$(window).on("load", function() {
  $('.carousel-container').each(function() {
    var $carouselContainer = $(this);
    var $carousel = $carouselContainer.find('.carousel').on('slid.bs.carousel', function() {
      var targetSlide = $carousel.find('.active').index();
      var targetContent = $carouselContainer.find('.slide-content[data-slide="' + targetSlide + '"]').html();
      $carouselContainer.find('.carousel-text').html(targetContent);
    }).carousel({
      interval: false
    });
    $carouselContainer.find('.carousel-selector').on('click', function() {
      var targetSlide = $(this).data('slide');
      $carousel.carousel(targetSlide);
    });
    // The carousel is already at first slide (slide 0).
    var n = $carouselContainer.find(".slide-content").length; // number of slides in this carousel
    if (n < 2 || $carouselContainer.closest(".modal").length > 0) { // if there are less than 2 slides, or the carousel is in a .modal container 
      // Trigger the 'slid.bs.carousel' event so its handler can look after the .carousel-text ...
      $carousel.trigger('slid.bs.carousel');
    } else { // ... else, there are 2 or more slides and this is a non-modal carousel: 
      // send to last slide
      $carousel.carousel(n - 1);
      // `slid.bs.carousel` event will be triggered automatically and its handler will look after the .carousel-text.
      $carousel.trigger('slid.bs.carousel');
    }
  });
})

nav {
  z-index: 1;
}

button .dropdown-menu {
  margin-top: 75px;
  position: fixed;
  z-index: 9999;
}

.container1 {
  position: fixed;
  left: 50%;
  transform: translate(-51.5%);
  z-index: 999;
  background-color: black;
}

#container2 {
  margin-top: 70px;
}

#thumbnail-view {
  transform: translateY(500px);
  padding-bottom: 50px;
}

Answer 1

制作下拉列表的位置fixed，调整位置（右/上）并为其提供比标题本身更高的z-index值