Z-index is ignored [duplicate] - html

Question

This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 2 years ago.
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>

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