Question

在我的网站上，我添加了一个顶部导航栏。该页面的行为类似于文本的顶部，div中的标签顶部开始，并将其顶部切掉。

转到my website（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;
}

Answer 1

也许您应该为导航栏添加min-height像素或％;以及z-index，使其显示在DOM中的所有其他元素之上。

固定div通过页面顶部

1 个答案: