ナビゲーションが要素の下にある - z-index not working

Question

私はヘッダーの下に配置されたナビゲーションバーを持っており、ビューポートの上部にくるとスティッキーになります。私はそれを行うにはjquery.stickyライブラリを使用しています。

スクロールすると、ウェブページ上の他のアイテムがナビゲーションの上に表示されるという問題があります。ナビゲーションは黒のままですが（黒はその色です）、テキストと画像が上に表示されます。

私はCSSのナビゲーション以下の要素に次のコードを使用しようとしました：仕事をしていませんし、今のナビゲーションが最上位の要素ですが、私は、底面の形を持っている

position: relative; 
z-index: -1; 

そのためページは入力フィールドにアクセスできません。

は、ここに私のコードです：

HTML

<section class="navigacija" id="sticky-nav"> 
    <nav> 
     <ul> 
      <div class="container"> 
       <div class="row"> 
       <div class="col-md-4"> 
        <li id="nav-about"><a href="#">about</a></li> 
       </div> 
       <div class="col-md-4"> 
        <li id="nav-devs"><a href="#">devs</a></li> 
       </div> 
       <div class="col-md-4"> 
        <li id="nav-joinus"><a href="#">join us</a></li> 
       </div> 
       </div> 
      </div> 
     </ul> 
    </nav> 
</section> 

CSS：

.navigacija { 
    background-color: #000; 
    padding: 5px 0 5px 0; 
    text-align: center; 
    line-height: 50px; 
} 

JS：

$(window).load(function(){ 
     $("#sticky-nav").sticky({ topSpacing: 0 }); 
    }); 

誰も私を助けることはできますか？

ALL FILES - >https://drive.google.com/open?id=0B2VRToUeRJBUTTRXc2t4THdnaUU

Answer 1

あなたは＃スティッキー-NAV-スティッキー・ラッパーにZインデックスを絶頂追加する必要があり、私あなたのケース。たとえば：！

#sticky-nav-sticky-wrapper { 
    position: relative; 
    z-index: 999; 
} 

それとも、たとえば.FOR .navigacijaに重要を追加することができます。jQueryプラグインは、スタイル属性で、独自のスタイルを追加しますので、あなたがそれを必要と

.navigacija { 
    background-color: #000; 
    padding: 5px 0 5px 0; 
    text-align: center; 
    line-height: 50px; 
    position: relative; 
    z-index: 999!important; 
} 

。そして、彼らはより多くの優先順位を持っています