CSS：div要素が重なっボタン、Zインデックス

Question

を働いていない私はボタンでトップバーとナビゲーションバー、Zインデックスの理由で、私は唯一のボタンが機能し得ることができますが、下に隠してメニューを持っています

PS：私はブートストラップがこれを使用して、バーガーメニューでのみ小さなディスプレイ上でこの問題を取得する小型デバイスの場合 ：

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

場合はトップバーまたは私は両方が、ボタンがクリックできないの取得します私はバーグルメニューZ-index:1030;を無効にする私の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

問題は、あなたが、本質的に持っているということです2つのフル幅のナビゲーバがそれぞれ1つのボタンでお互いの上に座っています。明らかに、あなたは一番上をクリックすることしかできません。 1つの解決策は、width: 50%;を.navbar-defaultに追加し、width: 200%;~.navbar-collapseを小さなディスプレイに追加することです。これにより、メニューボタン付きのNavbarは画面の半分だけをカバーし、折りたたみ可能なメニューは全幅のままで、インターネットボタンをクリックすることができます。