title: Vertical Scrollbar hidden behind Fixed Div (Overflow: auto not working)
body: <p>I have two fixed items: <strong>.topfilter</strong> and <strong>.bottomfilter</strong>  on my left navigation menu <strong>.sidebar-nav</strong> that I positioned with <strong>width:inherit</strong> so that they don't take the entire page. But now the scrollbar is hiding behind the two fixed list items. </p>
  
  <p><a href="https://i.stack.imgur.com/u5ALj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u5ALj.jpg" alt="enter image description here"></a></p>
  
  <blockquote>
    <p><strong>What I've tried:</strong> overflow-y: auto; overflow-y:initial; z-index:0; <strong>No Luck</strong></p>
  </blockquote>
  
  <p><strong>How can I un-hide the scroll bars from under the fixed list items?</strong> </p>
  
  <p><strong>Bonus:</strong> How can I make the fixed list items un-clickable and not highlight on hover like the other list items?**  </p>
  
  <p><a href="https://jsfiddle.net/4fqapznu/3/" rel="nofollow noreferrer">https://jsfiddle.net/4fqapznu/3/</a></p>
  
  <pre><code>         &lt;!-- Sidebar --&gt;
    &lt;div id="sidebar-wrapper"&gt;
  
  
      &lt;ul class="sidebar-nav"&gt;
      &lt;li class="topfilter"&gt;
     &lt;a class="filtertitle"&gt;Title&lt;/a&gt;
     &lt;/li&gt;
      &lt;br /&gt; &lt;br /&gt; 
        &lt;li&gt;
          &lt;a href="#/content"&gt;
          Content
          &lt;/a&gt;
        &lt;/li&gt;
                &lt;li&gt;
          &lt;a href="#/topics"&gt;
          Topics
          &lt;/a&gt;
        &lt;/li&gt;
                &lt;li&gt;
          &lt;a href="#"&gt;
          Groups
          &lt;/a&gt;
        &lt;/li&gt;
                &lt;li&gt;
          &lt;a href="#"&gt;
          Premium
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Dashboard&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Shortcuts&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Overview&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Events&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;About&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Services&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Contact&lt;/a&gt;
        &lt;/li&gt;
        &lt;br /&gt; &lt;br /&gt; &lt;br /&gt;
          &lt;li class="bottomfilter"&gt;
     &lt;a class="filtertitle"&gt;Footer&lt;/a&gt;
     &lt;/li&gt;
  
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;!-- /#sidebar-wrapper --&gt;
  
  
  
    &lt;div class="content" style="min-height:90%; background:white;"  &gt;
  
  
  
    &lt;/div&gt;
    &lt;div class="push"&gt;&lt;/div&gt;
  
  &lt;footer class="footer"&gt;
  
  
          &lt;/footer&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>a {outline:none !important;}
  
  html,
  body,
  .wrap {
    height: 100%;
  }
  
  .wrap {
    box-sizing: border-box;
  }
  
  form {
    height: 100%
  }
  
  .wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -60px;
    /* for sticky footer to not go below page */
    /* for sticky header to not overlap content */
  }
  
  .push,
  .footer {
    height: 60px;
  }
  
  
  
  .footer {
    background-color: #ebebeb;
    height: 60px;
    width: 100%;
    position: fixed;
    bottom: 0;   
  }
  
  .content {
    position: absolute;
    width: 100%;
    top: 120px;
    background-color: yellow;
    z-index: 0;
  }
  
  
  #sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 142px;
    top: 0px;
    margin-bottom: 60px;
    width: 0;
    height: 100%;
    margin-left: -142px;
    overflow-y: auto; overflow-x:hidden;
    background: #eee;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  
  
  .topfilter {border-bottom:solid #333 2px; width:100%; height:40px; position:fixed; display:block; text-align:left; background-color:blue; -moz-box-sizing: border-box:
      box-sizing: border-box:}
  
  .filtertitle { position:relative; display:inline-block; color:#000; width:100%; }
  
  .topfilter {border-bottom:solid #333 2px; width:100%; height:40px; position:fixed; display:block; text-align:left; background-color:blue; -moz-box-sizing: border-box:
      box-sizing: border-box:}
  
  .filtertitle { position:relative; display:inline-block; color:#000; width:100%; }
  
  .topfilter {border-bottom:solid #333 2px; width:inherit; z-index:1000; height:40px; position:fixed; display:block; text-align:left; background-color:blue; -moz-box-sizing: border-box;
      box-sizing: border-box;}
  
  
  .bottomfilter {border-top: solid #333 2px; width:inherit; height:40px; position:fixed; display:block; text-align:left; background-color:red; -moz-box-sizing: border-box; box-sizing: border-box; bottom:0;}
  
  
  #wrapper.toggled #sidebar-wrapper {
    width: 200px;
  }
  
  #page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
  }
  
     #wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -200px;
  }
  
  
  /* Sidebar Styles */
  
  .sidebar-nav {
    position: absolute;
    top: 0px;
    width:inherit; min-width:100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .sidebar-nav li {
    text-indent: 20px;
    line-height: 40px; 
  }
  
  .sidebar-nav li a {
    display: block; 
    text-decoration: none;
    color: #999999;
  }
  
  .sidebar-nav li a:hover {
    text-decoration: none;
    color: #333; 
    background: rgba(255, 255, 255, 0.6);
  }
  
  .sidebar-nav li a:active,
  .sidebar-nav li a:focus {
    text-decoration: none;
  }
  
  .sidebar-nav &gt; .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
  }
  
  .sidebar-nav &gt; .sidebar-brand a {
    color: #999999;
  }
  
  .sidebar-nav &gt; .sidebar-brand a:hover {
    color: #fff;
    background: none;
  }
  
  @media screen and (min-width:768px) {
    #wrapper {
      padding-left: 300px;
    }
    #wrapper.toggled {
      padding-left: 0;
    }
  
  
    #wrapper.toggled #sidebar-wrapper {
      width: 0;
    }
    #page-content-wrapper {
      padding: 20px;
      position: relative;
    }
    #wrapper.toggled #page-content-wrapper {
      position: relative;
      margin-right: 0;
    }
  }
  
  
  @media screen and (max-width:1526px) {
  
    .content,
    .footer {
      width: 82%;
      right: 0; 
    }
    .header {width:82%;}
  
      #sidebar-wrapper {
      width: 18%; 
    }
  
  }
  
  
  @media screen and (max-width:1059px) {
  
    .content,
    .footer {
      width: 80%;
      right: 0; 
    }
  
    .header {width:80%;}
  
      #sidebar-wrapper {
      width: 20%; 
    }
  }   
  
       @media screen and (min-width:1527px) {
  
    .content,
    .footer {
      width: 85%;
      right: 0; 
    }
    .header {width:85%;}
      #sidebar-wrapper {
      width: 15%; 
    }
  
  
  }
  
          @media screen and (max-width:991px) {
            .content,
    .footer {
      width: 100%;
      right: 0; 
    }
  
      #sidebar-wrapper {
      width:0; 
    }
  </code></pre>