z-index not displaying child behind parent - html

Question

I have a feeling I have my stacking contexts messed up, but I cannot get this working.
I have several divs, for which z-index is working correctly, however, one child is not cooperating.
My HTML looks something like this:
....
<div id="filters">
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="set">
<img src="Cat.png">
<div class="drop">
<img src="Hammer.png">
<img src="Cat.png">
<img src="Bat.png">
</div>
</div>
</div>
....
My CSS looks something like this:
#filters {
width: 256px;
height: 32px;
text-align: center;
background: linear-gradient(#147380, #0c454d);
padding: 0px 0px;
margin-bottom: 16px;
border: 1px solid #c8c998;
border-radius: 6px;
box-shadow: 0px 0px 0px 1px #504e20, inset 0px 0px 0px 1px #504e20;
position: relative;
z-index: 1;
}
.filter {
height: 22px;
width: 22px;
border-radius: 28px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 3px;
display: inline-block;
position: relative;
z-index: 4;
}
.set {
height: 22px;
width: 20px;
border-radius: 0px 28px 28px 0px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 0px;
margin-left: -19px;
padding: 0px 8px 0px 15px;
background: #e16006;
display: inline-block;
position: relative;
z-index: 3;
}
.drop {
position: relative;
z-index: 2;
width: 20px;
padding: 8px 4px 2px 4px;
top: 2px;
left: -6px;
border-radius: 0px 0px 7px 7px;
border: 2px solid #7b7651;
border-top: 0px;
background: #d55801;
}
What I am trying to do is to get the .drop behind the .set, which is behind the filter but all of them are ontop of .filters. With my code, everything is displayed properly except that .drop is ontop of .set.

Answer 1

Sorry to say that this is not possible. A child element cannot have a lower z-index than the parent element.
More on that topic

Answer 2

//text code
body{
padding:0;
margin:0;
}
#filters {
width: 256px;
height: 32px;
text-align: center;
background: linear-gradient(#147380, #0c454d);
margin-bottom: 16px;
border: 1px solid #c8c998;
border-radius: 6px;
box-shadow: 0px 0px 0px 1px #504e20, inset 0px 0px 0px 1px #504e20;
position: relative;
}
.filter {
height: 22px;
width: 22px;
border-radius: 28px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 3px;
display: inline-block;
position: relative;
border:1px solid gold;
}
.set {
height: 22px;
width: 20px;
border-radius: 0px 28px 28px 0px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 0px;
margin-left: -19px;
padding: 0px 8px 0px 15px;
background: #e16006;
display: inline-block;
border:1px solid black;
}
.drop {
position: relative;
width: 20px;
padding: 8px 4px 2px 4px;
border-radius: 0px 0px 7px 7px;
border: 2px solid #7b7651;
border-top: 0px;
background: #d55801;
border:1px solid cyan;
margin-top:-138px;
position: absolute;
right:21px;
transition:all 0.5s linear;
z-index:-1;
}
#filters .set:hover .drop{
margin-top:0px;
transition:all 0.5s linear;
}