正文滾動時正文內容重疊導航欄

Question

滾動頁面時正面臨錯誤，正文內容與導航欄重疊。

1. 我有內容超過導航欄應滾動時消失，它工作正常。
   
2. 雖然滾動導航欄應該是固定的，這是工作正常。
   
3. 問題出在滾動時，正文內容滑過導航欄。它應該從導航欄後面去。
   
4. 我有如下導航欄的圖像滑塊

下面是HTML文件的代碼：導航欄的

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> 
     <div class="row"> 
      <div class="col-sm-4" style="background-color:yellow; width:200px"> 
       <img class="img-responsive img-rounded pull-left" src="img/logo 1.png" alt="Chania" width="200" height="200"> 
      </div> 
      <div class="col-sm-4" style="background-color:pink;"> 
       <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> 
      <div class="col-sm-4 text-right" style="background-color:yellow;width:200px;"> 
       <img class="img-responsive img-rounded pull-right" src="img/logo 2.png" alt="Chania" width="200" height="200"> 
      </div> 
     </div> 
    </div> 

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
         <span class="sr-only">Menu</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 
      </div> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        menu name.. 
       </ul> 
       <form class="navbar-form navbar-right" role="search"> 
        <div class="form-group"> 
         <input type="text" class="form-control" placeholder="Search"> 
        </div> 
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> 
       </form> 
      </div> 
     </div> 
    </nav> 

CSS代碼：滑桿

.affix { 
top: 0; 
width: 100%; } 

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

CSS代碼

html, body { 
height: 100%;} 

.carousel, .item { 
height: 70%; } 

.carousel-inner { 
height: 143%; } 

.fill { 
width: 100%; 
height: 100%; 
background-position: center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
background-size: cover; 
-o-background-size: cover; } 

我是bootstrap的初學者。 謝謝。

Answer 1

你應該把這個在小提琴，但蝙蝠我猜想，你的導航欄應包含position:absolute;和z-index:1;

Answer 2

見狀查詢我已經取得的jsfiddle您剛纔檢查它。你正在使用加蓋修復導航欄。

所以在CSS只需添加以下內容：

.affix{ 
width:100%; 
top:0px; 
} 

並與您的導航欄的z-index的檢查保持像的z-index nabvar高值：9999;

JSfiddle link

所有的編碼看起來不錯，沒有問題這一點。只要檢查我的小提琴