Галерея Blueimp внутри относительного контейнера перекрыта фиксированными блоками

Question

Я подготовил DEMO, чтобы показать вам интересную вещь. Эта демонстрация содержит базовые blueimp gallery setup example, навигационную панель и кнопку.

<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> 

Когда пользователь нажимает изображение, он открывается и занимает весь экран, но если.wrapperимеет относительное положение, изображение не будет занимает весь экран, потому что нав бар будет перекрывать изображение.

Попробуйте сами.

1. Открыть демоверсию.
2. Нажмите на изображение.
3. Закрыть изображение.
4. Нажмите кнопку.
5. Нажмите на изображение.

После этого вы увидите, что панель навигации будет перекрывать изображение.

Как исправить эту проблему?

Answer 1

Когда вы делаете div-родственник, вы также добавляете z-index: 1 к нему - и вы уже набрали z-index: 10, так что это основная причина такого поведения.

z-index Попробуйте добавить больше чем 10 к относительному DIV в таблице стилей:

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