Question

我有一个带有按钮和导航栏的顶栏，因为z-index原因我只能让按钮工作但是菜单隐藏在顶栏下面或者我得到了两个但按钮不可点击：

PS：我只在汉堡菜单的小显示屏上出现此问题，对于小型设备，Bootstrap使用：

.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
}

如果我覆盖Z-index:1030;，bergur菜单会隐藏在我的headercss栏下。

这是我几乎整个CSS，也许有些部分对我的问题不重要：

HTML：

<div class="headercss navbar-fixed-top">
    <div class="element"> <a class="btn btn-warning" href="www.test.com">Internet &gt;</a></div>
</div>

   <div class="sidebar-nav">
                    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="navbar-collapse collapse sidebar-navbar-collapse" data-toggle="collapse" data-target=".navbar-collapse">
                            <ul class="nav navbar-nav">
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            <li><a href="#">test</a></li>
                            </ul>
                        </div><!--/.nav-collapse -->
                    </div>
                </div>

CSS：

.headercss {
    width: 100%;
    height: 62px;
    display:block;
    overflow:auto;
    background-color: #CAD722;
    top: -1px;
    left: 0px;
    position: fixed;
    z-index: 100;
}

}
.btn {
  font-size: 18px;
  font-weight: bold;
 }


/* make sidebar nav vertical */
.navbar-default .navbar-nav>li>a {
    font-weight: bold;
}

@media (min-width: 768px) {

    .navbar-default{
        width: 200px;;
        height: 100%;
        background-color: #e6dfd7;
        z-index: 0;
   }
    .sidebar-nav .navbar .navbar-collapse {
        margin-top: 65px;
        padding: 0;
        max-height: none;
    }
    .sidebar-nav .navbar ul {
        float: none;
        display: block;
    }
    .sidebar-nav .navbar li {
        float: none;
        display: block;
    }
    .sidebar-nav .navbar li a {
        padding-top: 12px;
        padding-bottom: 12px;
        font-size: 16px;
    }
    .sidebar-nav .navbar li a:hover {
        background-color: #CAD722;
    }

}
/*fixing bootstrap*/
.col-sm-10 {
    width: 100%;
    float: right;
}

@media (min-width: 768px){
    .col-sm-10 {
        width: 85%;
    }

}


    .navbar-default .navbar-collapse,.navbar-default .navbar-form {
    border-color:#CAD722;
}
    .content{
        position: relative;
    }
    .navbar-toggle {
        margin-top: 11px;
        margin-bottom: 1px;
        margin-left: 5px;
        float: left;
    }

    /*For small display*/
    @media (max-width: 768px) {
        .navbar-default {
            background-color: transparent;
            border-color: transparent;
        }
        .sidebar-nav .navbar li{
            background-color: #CAD722;
        }
    }

Answer 1

问题是你基本上有两个全宽导航栏彼此叠加，每个导航栏各有一个按钮。显然，您只能点击顶部的一个。一种解决方案是在小显示中将width: 50%;添加到.navbar-default和width: 200%;到.navbar-collapse;这会导致带有菜单按钮的导航栏仅覆盖屏幕的一半，允许您单击Internet按钮，而可折叠菜单保持全宽。

CSS：按钮重叠div，z-index不起作用

1 个答案: