固定在窗口顶部的菜单被下面的div覆盖

Question

我试图创建一个看起来像这样的布局，徽标可以滚动过去，但菜单仍然固定在页面顶部：

^^ Logo ^^
~~~~~~~~ **菜单**
~~~~~~~~ 正文正文正文正文。

This jsfiddle perfectly represents my plan。我使用Bootstrap的Affix插件来打开菜单＆＃34;粘贴＆＃34;在滚动，这很好。问题是，正文（break;）rolls over the menu when I scroll up。

网站加价大致是：

section#main

我不知道如何说服<header> <div id="logo"></div> <div id="nav-search"> <div class="row"> <div id="menu-top"></div> </div> </div> <div class="clearfix"></div> </header> <section id="main" class="row"> </section> 控制自己。我在#nav-search设置了一个高度。使用z-index，我可以将#nav-search div推到最上面，但这仍然意味着在贴上菜单的那一刻，一定量的身体变得模糊不清。我错过了什么？

Answer 1

这在我发送的链接中修复了它：

 #nav-wrapper.affix {
  postion: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}