固定的兩個元素位置被忽略z-index

我的網站有固定的模式窗口和菜單欄。當你打開一個模態窗口菜單時不隱藏。如何使模式窗口的酒吧菜單更低？固定的兩個元素位置被忽略z-index

HTML代碼：

<nav class="panel-nav"> 
    <ul> 
     <li><a href="#about-us">About Us</a></li> 
     ... 
    </ul> 
</nav> 

<nav class="navbar navbar-fixed-top nav-top" role="navigation"> 
    <div class="container"> 
     <div class="buttons"> 
      <button class="feedback text-left" data-toggle="modal" data-target="#write-us">Feedback</button> 
      <!-- Modal --> 
      <div class="modal fade" id="write-us" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
       <div class="modal-dialog modal-lg"> 
        <!-- Content --> 
       </div> 
      </div> 
     </div> 
    </div> 
</nav>

CSS代碼：

.panel-nav { 
    position: fixed; 
    z-index: 3; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    width: 150px; 
    height: 100%; 
    background: #f6f6f3; 
    font-size: 14px; 
} 

.modal { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 1040; 
    display: none; 
    overflow: hidden; 
    -webkit-overflow-scrolling: touch; 
    outline: 0; 
}

來源

2014-12-22 Ihor Tkachuk

爲什麼你需要CSS模式？ Bootstrap爲模態添加默認CSS。 – anpsmn

選中此[小提琴]（http://jsfiddle.net/anpsmn/p7c3gz38/）。我已經移除了nav之外的模態代碼，並且它與模態後面的菜單一起工作。這是你想要的嗎？ – anpsmn