jquery - Bootstrap 菜单顶部附加

Question

我正在尝试使用图像和菜单链接下的 Bootstrap 菜单，当滚动菜单时，菜单会粘在窗口顶部。

我发现了有趣的 Bootstrap 词缀并使用了该线程中的内容: bootstrap-affix : Div underneath affix "jumps" to top. How do I make it smoothly scroll behind?

问题是，当我按下菜单按钮时，选项位于页面的内容文本下方。

我写了一个 fiddle 供您查看我的问题并尝试解决方案: http://jsfiddle.net/mram888/WnPqF/

我尝试为菜单 div 的类设置不同的 z-index，但只有当页面滚动且菜单固定在顶部时才能正常工作。

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:2;
}

#nav > .navbar-inner {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

.nav-wrapper {
    z-index: 2;
}

Answer 1

您需要将 z-index 应用于 #nav 而不是 .nav-wrapper:

#nav { 
  position: relative;
  z-index: 2; 
}

演示: http://jsfiddle.net/t7pL3/