Наббар, показывающий перед всплывающим окном на Twitter Загрузочный бокс

Question

У меня эта проблема (показана на рисунке) с помощью навигационной панели Twitter Bootstrap и слайд-шоу из VisualLightBox.com.

Это код для моей навигационной панели:

<div class="collapse navbar-collapse navbar-ex1-collapse" id="mainNavbar"> 
    <ul class="nav navbar-nav"> 
     [...] 
    </ul> 
</div> 

HTML, для слайд-шоу очень просто:

<div id="vlightbox1"> 
    [...] 
</div> 

CSS-:

#vlightbox1 { 
    width:50%; 
    zoom:1; 
} 
#vlightbox1 .vlightbox1 { 
    display:-moz-inline-stack; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
    position:relative; 
    vertical-align:top; 
    margin:3px; 
    width:160px; 
    font-family:Trebuchet,Tahoma,Arial,sans-serif; 
    font-size:11px; 
    font-weight:normal; 
    text-decoration:none; 
    text-align:center; 
    opacity:0.87; 
    outline:none; 
} 
#vlightbox1 .vlightbox1 a{ 
    margin:0; 
} 
#vlightbox1 .vlightbox1:hover, #vlightbox1 .vlightbox1 a:hover{ 
    text-decoration:underline; 
    opacity:1; 
} 
#vlightbox1 .vlightbox1 img{ 
    display:block; 
    border:none; 
    margin:0; 
} 
#vlightbox1 .vlightbox1 div {display:none} 

Я попытался давая z-index 10000 в контейнер слайд-шоу без везения. Я что-то упускаю?

Большое вам спасибо!

Answer 1

навигационная панель, скорее всего, имеет более высокий Z-индекс, чем осветитель. Увеличьте z-index на лайтбоксе, чтобы узнать, исправляет ли он вашу проблему.

Например:

#vlightbox1 { 
    z-index: 9999; 
}