Question

我试图让 nav 在 header 后面，所以当按钮被点击时为红色矩形不覆盖蓝色，而是来自后面。它不遵循所需逻辑的原因是什么？

const menuBtn = document.getElementById("menuBtn");
const navMenu = document.getElementById("navMenu");

menuBtn.addEventListener("click", () => {
  navMenu.classList.toggle("active");
});

*{
  margin: 0;
  padding:0;
  box-sizing: border-box;
}

.header {
    height: 100px;
    width: 100%;
    background-color: blue;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.header__nav {
    background: red;
    height: 50px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-50px);
    transition: all 1s linear;
    z-index: 1;
}

.active {
    transform: translateY(100px);
}

<header class="header">
  <nav id="navMenu" class="header__nav"></nav>
  <button id="menuBtn">Toggle menu</button>
</header>

Answer 1

html

<header class="header">
    <div class="blue">
      <button id="menuBtn">Toggle menu</button>
    </div>
    <nav id="navMenu" class="header__nav"></nav>
   
  </header>

-css

*{
  margin: 0;
  padding:0;
  box-sizing: border-box;
}

.blue {
    height: 100px;
    width: 100%;
    background-color: blue;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

 .header__nav {
    background: red;
    height: 50px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-50px);
    transition: all 1s linear;
    z-index: 0;
}

.active {
    transform: translateY(100px);
}

Z-index 被忽略

1 个答案: