Bootstrap Navbar overtop Carousel

问题:

Having a slight problem with the positioning of my navbar. I have my navbar the way I would like (detached from the top slightly like in this example: http://getbootstrap.com/examples/carousel/) but the pictures in my carousel end below the navbar.

I would like for the pictures in my carousel to extend all the way to the top of the page and have the navbar overlapping the upper portion of the carousel (like in the example above). I've played around with the padding but the highest I can get the carousel images to extend to are the bottom of the navbar. I've attached the code snippets for the navbar, carousel and carousel css below. Any help would be appreciate, thanks in advance

Code for Navbar:

<div class="container">
  <div class="navbar navbar-inverse" role="navigation">  <!navbar-inverse is black, navbar-default is grey>


    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand">Derby Days 2014</a>
    </div>

    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Donate</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Events <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Penny Wars</a></li>
            <li><a href="#">Wonderful Wednesday</a></li>
            <li><a href="#">Lip Sync</a></li>
            <li><a href="#">Concert</a></li>
          </ul>
        </li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </div><!--/.nav-collapse -->
   </div>
</div>

Code for Carousel:

CSS code for carousel:

.carousel {position: relative;}

.carousel-inner {position: relative; width: 100%; overflow: hidden;}

回答1:

I believe this is what you are trying to achieve?

Js Fiddle

.bannerContainer {
    position:relative;     
}
.carousel {
    position:absolute;
    top:0;    
}
.navbar {
    position:absolute;
    top:30px;
    z-index:10;
    background:#fff;
    width:100%;
}

You want to wrap absolute positioned divs (nav and carousel) into a div that is relative.

回答2:

You can overright the existing bootstrap css with this,you can use position:fixed or position:absolute

.navbar{
      position:absolute;
      width:100%;
      z-index:10;
      max-width:100%;
}

Here is working codepen example

回答3:

//To get navbar to sit on top of the carousel.

.navbar {
position:absolute
}

//To center the image and add a bit of padding above it to compensate for the navbar.

.carousel-inner > .item > img {
    margin: 0 auto;
    padding-top: 50px;
}

Worked for me at the very least, so here's hoping it helps you (and others). Cheers.

回答4:

On the linked example they used a wrapper outside the nav .navbar-wrapper with an absolute placement and a top margin of 20px (when the viewport width is larger than 768px).

Here is the code they used to make it work:

.navbar-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 20;
}

.navbar-wrapper .container {
   padding-left: 0;
   padding-right: 0;
}

.navbar-wrapper .navbar {
   padding-left: 15px;
   padding-right: 15px;
}

@media (min-width: 768px) {
  .navbar-wrapper {
    margin-top: 20px;
  }
}

回答5:

here is what worked for me:

1. Put the carousel into a section and make it absolute

2. Make the navbar absolute too

        <section id="home">
             <div id="carouselExampleIndicators" class="carousel slide" data- 
             ride="carousel">....
       </section>
        //the navbar
       <nav class="navbar navbar-expand-lg navbar-dark fixed-top  mynav" >... 
       </nav>
   

////////CSS

.mynav{
    position: absolute;
  }
.home{
    position: absolute;
}