CSS: Schaltfläche überlappte durch einen div, z-index nicht funktioniert

Question

Ich habe eine Top-Bar mit einem Knopf und einer Navigationsleiste, für z-index Grund kann ich nur auf die Schaltfläche zum Laufen bringen, aber das Menü ausgeblendete unter die obere Leiste oder ich beide aber die Schaltfläche nicht angeklickt werden:

PS: ich habe dieses Problem nur auf kleine Anzeige mit dem Burger-Menü bekommen, Für das kleine Gerät, Bootstrap verwendet diesen:

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

Wenn Ich überschreibe Z-index:1030; das Menü bergur ist unter meiner Header-Leiste versteckt.

Hier ist meine fast ganze CSS, vielleicht ein paar Teile für mein Problem nicht von Bedeutung sind:

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

Das Problem ist, dass Sie im Wesentlichen haben zwei Navibreiten in voller Breite, die übereinander sitzen, mit je einer Taste. Natürlich können Sie nur auf den obersten klicken. Eine Lösung besteht darin, width: 50%; zu .navbar-default und width: 200%; zu .navbar-collapse in dem kleinen Display hinzuzufügen; Dies bewirkt, dass die Navigationsleiste mit der Menüschaltfläche nur die Hälfte des Bildschirms ausfüllt, sodass Sie auf die Internetschaltfläche klicken können, während das reduzierbare Menü die volle Breite behält.