Html 固定div穿过页面顶部

在我的网站上，我添加了一个顶部导航栏。页面的行为就像文本的顶部是div中选项卡顶部的开始位置，并将其顶部切掉

转到（familyfrat.com）并查看顶部的主要选项卡以查看示例

顶部导航div的CSS是：

    .nav-bar{
      background-color:#ac5930;
      height:4.5%;
      width:100%;
      position:fixed;
      left:0px;
      top:0px;
    }

以下是div中选项卡的代码：

    #tab-family,#tab-grouplets,#tab-support,#tab-home,#tab-myacc{
    background-color:#ac5930;
    padding:10px 20px 10px 20px;
    color:#29150b;
    font-size:100%;
    font-family:arial;
    display:inline;
    cursor:default;
    height:100%;
    transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    -ms-transition:.3s;
    -o-transition:.3s;
}
#tab-family:hover,#tab-grouplets:hover,#tab-support:hover,#tab-home:hover,#tab-myacc:hover{
    background-color:#8a4726;
    transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    -ms-transition:.3s;
    -o-transition:.3s;
}
#tab-family:active,#tab-grouplets:active,#tab-support:active,#tab-home:active,#tab-myacc:active{
    background-color:#532b17;
    transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    -ms-transition:.3s;
    -o-transition:.3s;
}

---

也许你应该为导航栏添加一个以像素或%为单位的

min height

，以及一个使其显示在DOM中所有其他元素之上的

z-index

。

对于那些对其进行评分的人，请告诉我原因或在您将其评为一个糟糕的问题之前给我帮助。谢谢我把它改了，但它仍然粘在页边空白处。