Twitter-Bootstrap: Navbar 在 Carousel 后面。我怎么把它放在前面？

Question

我有一个导航栏，我在一些信息文本之后修复了它，只要您向下滚动，它就会固定在顶部。在导航栏的正下方有一个图片轮播。但是：由于某种原因，当我进一步滚动时，导航栏隐藏在轮播后面。我不能把它留在上面。

我已经尝试将 navbar-inverse 更改为 navbar-fixed-top 但其余部分不起作用。

这是 jsfiddle：https://jsfiddle.net/hwpdu066/

代码如下。

谁能帮我解决这个问题？

谢谢！

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

/* Affix for hiding the top Menu/Infos - Bringing the navbar on top*/

.affix {
  top: 0;
  https: //jsfiddle.net/#
  width: 100%;
  position: fixed;
}

.affix + .container-fluid {
  padding-top: 70px;
}


/* Navbar stuff */

.navbar-brand {
  margin: 0px;
  padding: 0 0 0 35px;
}

.navbar {
  min-height: 100px;
}

.navbar-custom {
  padding: 25px 0;
  background-color: black;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 200;
  border-radius: 0;
  margin-bottom: 0;
  width: 100%
}

.navbar-inverse {
  border-width: 0;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}


/*Carousel stuff*/

.carousel-inner img {
  width: 100%;
  margin: auto;
  min-height: 500px;
  max-height: 500px;
  object-fit: cover;
  /*fits the image without actually stretching it*/
}

.carousel-inner>.item {
  width: 100%;
}


/* Hide the carousel text when the screen is less than 600 pixels wide */

@media (max-width: 600px) {
  .carousel-caption {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>
  <!--Upper Menu and Info-->
  <div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
    <h1>Bootstrap Affix Example</h1>
    <h3>Fixed (sticky) navbar on scroll</h3>
    <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
    <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
  </div>

  <!--Navigation-->
  <nav id="mainNav" class="navbar navbar-default navbar-inverse navbar-custom " data-spy="affix" data-offset-top="197">
    <div class="container">
      <div class="navbar-header page-scroll">
        <a class="navbar-brand" href="#">this is the navbar</a>
      </div>
    </div>
  </nav>

  <!--Picture Carousel-->
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://media.istockphoto.com/photos/overhead-view-of-two-business-persons-in-the-lobby-picture-id520791880?s=2048x2048" alt="Image">
        <div class="carousel-caption">
        </div>
      </div>

      <div class="item">
        <img src="http://media.istockphoto.com/photos/friends-connection-digital-devices-technology-network-concept-picture-id525208898?s=2048x2048" alt="Image">
        <div class="carousel-caption">
          <h3>Lorem</h3>
          <p>Lorem ipsum...</p>
        </div>
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <!-- for scrolling-->
  <div>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
  </div>
</body>

Answer 1

尝试在 css 文件的导航栏上使用 z-index。 Z-index重新排列元素的堆叠顺序。

Answer 2

试试这个：

您可以在 .carousel-inner>.item class 文件中添加 Z-index:-9;

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

/* Affix for hiding the top Menu/Infos - Bringing the navbar on top*/

.affix {
  top: 0;
  https: //jsfiddle.net/#
  width: 100%;
  position: fixed;
}

.affix + .container-fluid {
  padding-top: 70px;
}


/* Navbar stuff */

.navbar-brand {
  margin: 0px;
  padding: 0 0 0 35px;

}

.navbar {
  min-height: 100px;
}

.navbar-custom {
  padding: 25px 0;
  background-color: black;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 200;
  border-radius: 0;
  margin-bottom: 0;
  width: 100%
}

.navbar-inverse {
  border-width: 0;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}


/*Carousel stuff*/

.carousel-inner img {
  width: 100%;
  margin: auto;
  min-height: 500px;
  max-height: 500px;
  object-fit: cover;
  /*fits the image without actually stretching it*/

}

.carousel-inner>.item {
  width: 100%;
  z-index:-9;
}


/* Hide the carousel text when the screen is less than 600 pixels wide */

@media (max-width: 600px) {
  .carousel-caption {
    display: none;
  }
}

DEMO HERE