Bootstrap傳送帶定位問題

Question

我卡住了引導傳送帶定位。用幾句話，我必須做滑塊如下圖。

幾乎整整一天，我想了解如何在圖像上定位像這樣的滑塊。因爲我有2個部分。 1st - 我的HEADER和HEADER部分之後，我有引導滑塊，它位於我的.header部分下方，我必須將滑塊以某種方式推到.header部分後面的頂部。任何建議或指導？

這是我的代碼，直到這一刻。

.top-layer { background: #8bc541; padding-bottom: 25px; } 
 

 
.logo-container { display: flex; justify-content: center; align-items: center; position: relative; } 
 
.logo { position: absolute; bottom: 9px; width: 164px; height: 32px; } 
 
.logo a { margin-bottom: 5px; display: block; height: 100%; background: url(../images/logo.png) no-repeat 0 0; font-size: 0; line-height: 0; font-style: normal; overflow: hidden; text-indent: -100%; } 
 
.logo p { padding: 0 4px; margin-right: 2px; letter-spacing: 0.3px; cursor: pointer; text-align: center; } 
 
.main-nav { clear: both; } 
 
.main-nav .left-nav { list-style: none; float: left; text-align: right; padding-right: 136px; } 
 
.main-nav .left-nav li, 
 
.main-nav .right-nav li { display: inline-block; } 
 
.main-nav .left-nav li a, 
 
.main-nav .right-nav li a { font-size: 14px; font-weight: bold; color: #000; text-decoration: none; line-height: 24px; letter-spacing: 0.3px; } 
 
.main-nav .left-nav li a:hover, 
 
.main-nav .right-nav li a:hover { color: #fff; } 
 
.main-nav .left-nav li + li:before, 
 
.main-nav .right-nav li + li:before { content: ''; border-right: 2px solid #fff; margin: 0 10px; } 
 
.main-nav .right-nav { list-style: none; float: right; text-align: left; padding-left: 136px; } 
 
.main-nav .left-nav li, 
 
.main-nav .right-nav li { margin-top: 36px; } 
 
.slider-content { position: absolute; top: 0; left: 50%; z-index: 20; } 
 
.fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } 
 

 
.bg-layer { background: url(../images/bg.jpg) 0 0 no-repeat; background-size: cover; min-height: 941px; } 
 

 
.glyphicon-chevron-left { background: url(../images/btn-change.png) 0 0 no-repeat; min-width: 50px; min-height: 50px; font-size: 0; line-height: 0; font-style: normal; overflow: hidden; text-indent: -100%; } 
 
.glyphicon-chevron-right { background: url(../images/btn-change.png) 0 0 no-repeat; min-width: 50px; min-height: 50px; transform: rotate(180deg); font-size: 0; line-height: 0; font-style: normal; overflow: hidden; text-indent: -100%; } 
 
.glyphicon-chevron-left:hover, 
 
.glyphicon-chevron-right:hover { background: url(../images/btn-change-hov.png) 0 0 no-repeat; min-width: 50px; min-height: 50px; } 
 
.carousel-control.left, 
 
.carousel-control.right { background: none; }

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

 
<header class="header"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <a id="menu-icon" href="#"><span></span></a> 
 
     <nav class="main-nav"> 
 
     <div class="col-md-6"> 
 
      <ul class="left-nav"> 
 
      <li><a href="#" class="active-state">Home</a> 
 
      </li> 
 
      <li><a href="#">Evaporative Coolers</a> 
 
      </li> 
 
      <li><a href="#">Misting Fans</a> 
 
      </li> 
 
      <li><a href="#">Ice Makers</a> 
 
      </li> 
 
      </ul> 
 
      <!-- left-nav --> 
 
     </div> 
 
     <!-- col-md-6 --> 
 
     <div class="col-md-6"> 
 
      <ul class="right-nav"> 
 
      <li><a href="#">Humidifiers</a> 
 
      </li> 
 
      <li><a href="#">Air Purifiers</a> 
 
      </li> 
 
      <li><a href="#">Product Videos</a> 
 
      </li> 
 
      <li><a href="#">About Us</a> 
 
      </li> 
 
      </ul> 
 
      <!-- right-nav --> 
 
     </div> 
 
     <!-- col-md-6 --> 
 
     </nav> 
 
     <!-- main-nav --> 
 
    </div> 
 
    <!-- row --> 
 
    <div class="logo-container"> 
 
     <div class="logo"> 
 
     <a href="#" target="_blank">luma comfort</a> 
 
     <p class="text-center">Why Buy Ugly?</p> 
 
     </div> 
 
     <!-- logo --> 
 
    </div> 
 
    <!-- logo-container --> 
 
    <div class="moto"> 
 
     <h1>Because you’re not like<br> everyone else.</h1> 
 
     <p>Lorem ipsum is simply dummy text of the printing</p> 
 
     <a href="#" class="btn learn-more">Learn More</a> 
 
    </div> 
 
    <!-- moto --> 
 
    </div> 
 
    <!-- container --> 
 
</header> 
 
<!-- header --> 
 
<div id="slider-content" class="carousel slide" data-ride="carousel" data-interval="false"> 
 
    <ol class="carousel-indicators hidden"> 
 
    <li data-target="#slider-content" data-slide-to="0" class="active"></li> 
 
    <li data-target="#slider-content" data-slide-to="1"></li> 
 
    <li data-target="#slider-content" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <div class="carousel-inner"> 
 
    <div class="active item"> 
 
     <img src="https://s22.postimg.org/e3zmp0bz1/image.jpg" title="someText" alt="someText" class="fill"> 
 
     <div class="carousel-content"> 
 

 
     </div> 
 
     <div class="carousel-caption"></div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="https://s22.postimg.org/k679fi0f1/bg_2.jpg" title="someText" alt="someText" class="fill img-responsive"> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="https://s22.postimg.org/49d2wixel/bg_3.jpg" title="someText" alt="someText" class="fill img-responsive"> 
 
    </div> 
 
    </div> 
 

 

 
    <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>

Answer 1

我創建了一個簡單的codepen鏈接。

http://codepen.io/swapnaranjitanayak/pen/gLWEoY

我在這裏所做的導航欄 「position:absolute」。如果你想使它成爲「fixed」，請在Bootstrap中使用navbar-fixed-top預定義的類。