html - CSS : button overlapped by a div, z-index 不工作

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 按钮，而可折叠菜单保持全宽。