Z-index is ignored

Question

I'm trying to make nav to go behind the header so when the button is clicked red rectangle does not cover the blue one but comes from behind. What is the reason it doensn't follow the required logic?

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>

Simply move `nav` after `Header` – Minal Chauhan Dec 30 '20 at 06:55 — Minal Chauhan, Dec 30 '20 at 06:55

score 0 · Answer 1 · answered Dec 30 '20 at 07:28

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 is ignored

1 Answers1