Jquery 如何使我的覆盖不覆盖我的下拉内容？

我正在固定位置导航栏中创建一个下拉列表。当我点击“打开”按钮时，我希望覆盖除下拉内容以外的所有内容

我曾尝试将我的下拉内容的z索引设置为10000，但没有成功

$（“#下拉按钮”）。单击（函数（）{
$（“.dropdown content”）.toggleClass（“show”）；
if（$（“.dropdown content”）.hasClass（“show”））{
美元（“.overlayT”）.fadeIn（500）；
}否则{
美元（“.overlayT”）。淡出（500）；
}
});
正文{
字体系列：“Lato”，无衬线；
}
.覆盖层{
位置：固定；
排名：0；
背景色：rgba（0,0,0,0.5）；
z指数：2；
显示：无；
身高：100%；
宽度：100%；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
最小宽度：200px；
边界半径：5px；
垫面：2rem；
z指数：10000；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表内容a：悬停{
背景色：#f1f1
}
.表演{
显示：块；
}

☰ 打开
您可以将
.overlayT
元素移动到span元素中，使其成为
.dropdown content
的同级元素，因为它们将处于同一级别。它有助于控制哪一个将在对方前面：

<div style="width: 100%;background-color: white;height:100px;border-style: solid;position: fixed;z-index: 1;" id="dropDownButton">
    <span style="font-size:30px;cursor:pointer; float:left; margin-left: 3rem">
        ☰ open
        <div class="overlayT"></div>
        <div class="dropdown-content">
            <a href="#">Home</a>
            <a href="#">Account</a>
            <a href="#">Sign Out</a>
        </div>
    </span>
</div>

我决不会想到这个解决办法。谢谢你，阿扎梅津！。
.overlayT {
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
    display: none;
    height: 100%;
    width: 100%;
    left: 0;
}