jquery - 如何让我的 Overlay 不覆盖我的下拉内容？

Question

我正在我的固定位置导航栏中创建一个下拉菜单。当我点击打开按钮时，我希望我的叠加层覆盖除我的下拉内容之外的所有内容。

我已经尝试将我的下拉内容的 z-index 设置为 10000，但它没有用。

$("#dropDownButton").click(function () {

    $(".dropdown-content").toggleClass("show");

    if ($(".dropdown-content").hasClass("show")) {
        $(".overlayT").fadeIn(500);
    } else {
        $(".overlayT").fadeOut(500);
    }

});

body {
    font-family: "Lato", sans-serif;

}

.overlayT {
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
    display: none;
    height: 100%;
    width: 100%;
}

.dropdown {
    position: relative;
    display: inline-block;

}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    min-width: 200px;
    border-radius: 5px;
    padding-top: 2rem;
    z-index: 10000;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1
}

.show {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overlayT">
  </div>

  <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">&#9776; open
          <div class="dropdown-content">
              <a href="#">Home</a>
              <a href="#">Account</a>

              <a href="#">Sign Out</a>
          </div>
      </span>
  </div>

如何让我的叠加层不覆盖我的下拉内容？ (如果我的导航栏位置不固定但我需要固定导航栏，它确实有效)。请帮忙。谢谢

Answer 1

您可以将 .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>

然后，将 left: 0 添加到 overlay 以正确定位它:

.overlayT {
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
    display: none;
    height: 100%;
    width: 100%;
    left: 0;
}