ブートストラップ：カルーセルブレークの半透明のナビゲーションバーオーバーレイページCSS

Question

透明なブートストラップのナビゲーションバーオーバーレイをブートストラップカルーセルに実装しようとしていますが、問題が少しあります。それは下に提供されるコードであるが、問題はこれがページCSSを破り、スライダーの下にあるはずのコンテンツがナビゲーションバーの上に現れることである。

CSS：

.navbar-wrapper { 
    position:relative; 
} 
.carousel { 
    position:absolute; 
    top:60px; 
} 
.carousel-inner { 
    width: 100%; 
    overflow: hidden; 
} 
.navbar { 
    position:absolute; 
    top:0; 
    z-index:10; 
    background: rgb(0, 0, 0); opacity: 0.85; 
    width:100%; 
} 

にあなたが私はちょうど私がそれを望んでいたナビゲーション位置を取得するまで、以下のコードを使用していたとして、私は唯一の「ナビゲーションバー」のナビゲーションバークラスを追加したナビゲーションバーのHTMLから見ることができるようにつまり、ページの破損の問題が修正されたときに、私は他の行を追加します。私はそれが問題を引き起こしているカルーセルの実際のCSSとは関係ないと推測しているので、コードを出し入れしてもページの破損の問題は変わりません。 HTML：

<div class="navbar-wrapper"> 
     <div class="navbar"> 
     </div> 
    </div><!-- /navbar-wrapper --> 


    <!-- simple bootstrap carousel --> 
    <div id="carousel-generic" class="carousel slide small-browser-margins reposition-top" data-ride="carousel"> 

     <ol class="carousel-indicators"> 
      <li data-target="#carousel-generic" data-slide-to="0" class="active"></li> 
      <li data-target="#carousel-generic" data-slide-to="1"></li> 
      <li data-target="#carousel-generic" data-slide-to="2"></li> 
      <li data-target="#carousel-generic" data-slide-to="3"></li> 
     </ol> 

     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="images/image1.jpg" alt="" class="img-responsive"> 
      </div> 
      <div class="item"> 
       <img src="images/image2.jpg" alt="" class="img-responsive"> 
      </div> 
      <div class="item"> 
       <img src="images/image3.jpg" alt="" class="img-responsive"> 
      </div> 
      <div class="item"> 
       <img src="images/image4.jpg" alt="" class="img-responsive"> 
      </div>  
     </div> 
    </div><!-- /#carousel-generic --> 

画像は、問題を明確にするために追加、すべてのテキストは、カルーセル以下でなければなりません。

Answer 1

ああ親愛なる...お茶のカップと、物事をもう一度見て、これは私がしなければならなかったすべて、CSSへの非常に小さな変化であった：

.navbar-wrapper { 
    position:relative; 
} 
.carousel { 
    top:0; 
} 
.carousel-inner { 
    width: 100%; 
    overflow: hidden; 
    } 
.navbar { 
    position:absolute; 
    top:0; 
    z-index:10; 
    background: rgb(0, 0, 0); opacity: 0.85; 
    width:100%; 
}