Why isn't z-index working here? - html

Question

I want the webdsn-drop to be behind the #navbuttons-container but I can't get it to work. For some reason #navbuttons-container div is behind it #webdsn-drop and I want these layers reversed.
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">
Logo Design
<div id="webdsn-drop">
<h1 class="subname">
<h1>
</div>
</div>
<div class="navbuttons">
Art & Misc.
<div id="webdsn-drop">
<h1 class="subname">
<h1>
</div>
</div>
<div class="navbuttons">
Posters & Flyers
<div id="webdsn-drop">
<h1 class="subname">
<h1>
</div>
</div>
<div id="webdsn-menu" class="navbuttons">
Website Design
<div id="webdsn-drop">
<h1 class="subname">WEBSITE DESIGN
<h1>
</div>
</div>
</div>
</div>
</div>

Answer 1

Apply z-index: -1; to .webdsn-drop- since it's a child element of #navbuttons-container, you need to use a negative z-index in order to move it behind the parent.