Vertikale Scrollbar hinter Feste Div versteckt (Überlauf: Auto nicht funktioniert)

Question

Ich habe zwei feste Elemente: .topfilter und .bottomfilter auf meinem linken Navigationsmenü .sidebar-nav, die ich mit Breite positioniert: inherit, damit sie nicht die gesamte Seite nehmen. Aber jetzt befindet sich die Bildlaufleiste hinter den zwei festen Listenelementen.

Was ich habe versucht: Überlauf-y: auto; Überlauf-y: initial; Z-Index: 0; Kein Glück

Wie kann ich un-verstecken die Bildlaufleisten unter den festen Listenpositionen?

Bonus: Wie kann ich markieren die festen Listenelemente un-klickbare und nicht auf schweben wie die anderen Listenelemente **

https://jsfiddle.net/4fqapznu/3/

  <!-- Sidebar --> 
    <div id="sidebar-wrapper"> 


    <ul class="sidebar-nav"> 
    <li class="topfilter"> 
    <a class="filtertitle">Title</a> 
    </li> 
    <br /> <br /> 
     <li> 
     <a href="#/content"> 
     Content 
     </a> 
     </li> 
       <li> 
     <a href="#/topics"> 
     Topics 
     </a> 
     </li> 
       <li> 
     <a href="#"> 
     Groups 
     </a> 
     </li> 
       <li> 
     <a href="#"> 
     Premium 
     </a> 
     </li> 
     <li> 
     <a href="#">Dashboard</a> 
     </li> 
     <li> 
     <a href="#">Shortcuts</a> 
     </li> 
     <li> 
     <a href="#">Overview</a> 
     </li> 
     <li> 
     <a href="#">Events</a> 
     </li> 
     <li> 
     <a href="#">About</a> 
     </li> 
     <li> 
     <a href="#">Services</a> 
     </li> 
     <li> 
     <a href="#">Contact</a> 
     </li> 
     <br /> <br /> <br /> 
     <li class="bottomfilter"> 
    <a class="filtertitle">Footer</a> 
    </li> 

    </ul> 
    </div> 
    <!-- /#sidebar-wrapper --> 



    <div class="content" style="min-height:90%; background:white;" > 



    </div> 
    <div class="push"></div> 

<footer class="footer"> 


     </footer> 

CSS:

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 > .sidebar-brand { 
    height: 65px; 
    font-size: 18px; 
    line-height: 60px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #999999; 
} 

.sidebar-nav > .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; 
    } 

Answer 1

Fügen Sie right: 12px; zurhinzuund .bottomfilter css code.