Html z索引不显示父级后面的子级

我有一种感觉，我把我的堆叠环境搞砸了，但我无法让它工作

我有几个div，z-index工作正常，但是有一个孩子不配合

我的HTML如下所示：

....
<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>
....

#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;
}

---

我试图做的是在

过滤器

后面的

集合

后面放置

.drop

，但它们都在

过滤器

的上面。对于我的代码，除了

.drop

位于

.set

上之外，所有内容都可以正确显示。很抱歉，这是不可能的。子元素的z索引不能低于父元素

---

那么我需要设置一个伪容器吗？我想你需要重新考虑你的HTML。如果你可以使用你的代码，我可以摆弄它。我可以通过将

.set

和

.drop

兄弟姐妹放在另一个父项下来实现这一点。同样，我建议

//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;
   }