jquery - 导航栏显示在 Twitter Bootstrap 上的弹出窗口前面

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}

我尝试将 10000 的 z-index 赋予幻灯片容器，但没有成功。我错过了什么吗？

太感谢了！

Answer 1

导航栏很可能具有比灯箱更高的 z-index。增加灯箱上的 z-index 以查看它是否可以解决您的问题。

例如：

#vlightbox1 {
  z-index: 9999;
}