相対コンテナ内のBlueimpギャラリーが固定ブロックでオーバーラップしています

Question

私はDEMOを準備しました。このデモには、基本的なblueimp gallery setup example、ナビゲーションバーとボタンが含まれています。ナビゲーションバーは、画像を重複するので.wrapperは相対位置を持っている場合、画像はなりません

<div class="nav">nav</div> 

<div class="wrapper"> 

    <div id="links"> 
    <a href="images/banana.jpg" title="Banana"> 
     <img src="images/thumbnails/banana.jpg" class="image" alt="Banana"> 
    </a> 
    <a href="images/apple.jpg" title="Apple"> 
     <img src="images/thumbnails/apple.jpg" class="image" alt="Apple"> 
    </a> 
    <a href="images/orange.jpg" title="Orange"> 
     <img src="images/thumbnails/orange.jpg" class="image" alt="Orange"> 
    </a> 
    </div> 

    <div id="blueimp-gallery" class="blueimp-gallery"> 
    <div class="slides"></div> 
    <h3 class="title"></h3> 
    <a class="prev">‹</a> 
    <a class="next">›</a> 
    <a class="close">×</a> 
    <a class="play-pause"></a> 
    <ol class="indicator"></ol> 
    </div> 

</div> 

<button type="button" class="button">Click Me</button> 

ユーザーの画像をクリックして、それが開いてフルスクリーンを占めているが、は、フルスクリーンを占めています。

自分で試してみてください。

1. オープンデモ。
2. 画像をクリックします。
3. 画像を閉じる
4. ボタンをクリックします。
5. 画像をクリックします。

これが表示されると、ナビゲーションバーが画像と重なって表示されます。

この問題を解決するにはどうすればよいですか？

Answer 1

divを作成しているときには、z-index: 1も追加されています。あなたのnavbarには既にz-index: 10があるので、そのような動作の主な原因です。あなたのスタイルシートで相対div要素に10より大きいz-indexを追加

試してみてください。

&_relative { 
    position: relative; 
    z-index: 11; 
    }