Question

我有一个Navbar我修复了一些Info-Text后，只要你向下滚动就固定在顶部。直接在Navbar下面有一个图片轮播。但是：出于某种原因，当我进一步滚动时，导航栏隐藏在旋转木马后面。我不能把它留在最前面。

我已经尝试将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

试试这个：

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

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

Nested Set model

Answer 2

更新了您的js小提琴https://jsfiddle.net/hwpdu066/14/

添加

#myCarousel
{
 z-index: -1;
}

Answer 3

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

Answer 4

试试这段代码

part=snippet
channelId=CHANNEL_ID_YOU_WANT_TO_CHECK
maxResults=10  - it depends on you
order=viewCount

https://jsfiddle.net/hwpdu066/13/

Twitter-Bootstrap：Navbar落后于Carousel。我如何在前面获得它？

4 个答案: