Warum funktioniert der Z-Index nicht?

Question

Ich möchte die Webdsn-Drop hinter dem # Naviebuttons-Container sein, aber ich kann es nicht funktionieren. Aus irgendeinem Grund # navbuttons-container div ist dahinter # webdsn-drop und ich möchte diese Schichten umgekehrt.

body { 
 
    background-color: #0f0f0f; 
 
    width: 980px; 
 
    margin: 0 auto; 
 
} 
 

 

 
/*-----NAVIGATION-BAR-----*/ 
 

 
#navbuttons-container { 
 
    background-color: #303030; 
 
    width: 100%; 
 
    overflow: auto; 
 
    position: fixed; 
 
    left: 0px; 
 
    top: 0px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    z-index: 10; 
 
} 
 

 
#web-name { 
 
    color: #f7f7f7; 
 
    font-family: 'calibri light'; 
 
    padding: 4.5px 0 0 10px; 
 
    float: left; 
 
    font-size: 30px; 
 
    margin: 0 auto; 
 
    letter-spacing: 10px; 
 
} 
 

 
#navigation { 
 
    max-width: 980px; 
 
    min-width: 854px; 
 
    margin: 0 auto; 
 
} 
 

 
.navbuttons { 
 
    float: right; 
 
    font-size: 20px; 
 
    font-family: 'calibri'; 
 
    display: flex; 
 
} 
 

 
.navbuttons a { 
 
    color: #f7f7f7; 
 
    text-decoration: none; 
 
    padding: 12.5px 20px; 
 
    background-color: #303030; 
 
    transition: background-color 0.5s ease; 
 
} 
 

 
.navbuttons a:hover { 
 
    background-color: #5b5b5b; 
 
    transition: background-color 0.5s ease; 
 
} 
 

 
#webdsn-drop { 
 
    position: fixed; 
 
    left: 0px; 
 
    background-color: red; 
 
    width: 100%; 
 
    z-index: 9; 
 
}

<div id="navbuttons-container"> 
 
    <div id="navigation"> 
 

 
    <h1 id="web-name">PORTFOLIO</h1> 
 

 
    <div class="navbuttons-container"> 
 

 
     <div class="navbuttons"> 
 
     <a href="">Logo Design</a> 
 
     <div id="webdsn-drop"> 
 
      <h1 class="subname"> 
 
      <h1> 
 
     </div> 
 
     </div> 
 

 
     <div class="navbuttons"> 
 
     <a href="">Art & Misc.</a> 
 
     <div id="webdsn-drop"> 
 
      <h1 class="subname"> 
 
      <h1> 
 
     </div> 
 
     </div> 
 

 
     <div class="navbuttons"> 
 
     <a href="">Posters & Flyers</a> 
 
     <div id="webdsn-drop"> 
 
      <h1 class="subname"> 
 
      <h1> 
 
     </div> 
 
     </div> 
 

 
     <div id="webdsn-menu" class="navbuttons"> 
 
     <a href="">Website Design</a> 
 
     <div id="webdsn-drop"> 
 
      <h1 class="subname">WEBSITE DESIGN 
 
      <h1> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 1

Bewerben z-index: -1;-.webdsn-drop - da es sich um ein untergeordnetes Element von #navbuttons-container ist, ein negativer z-Index verwenden, um brauchen sie hinter dem Elternteil zu bewegen.