Making fixed div under another fixed div with tailwindcss-CodePudding

So I'm trying to make a navigation translating (moving) from top to bottom. But the navigation goes over my header. I would like the navigation to go under header. Z-index is not working for me. Any clue on what the fix would be?

Here's the jsfiddle: https://jsfiddle.net/efvujt4L/

Here's the html:

    <header >
        <div >
            <h1><a href="">Project</a></h1>
            <div id="toggleNavigation" >
                <label >
                    <input id="toggleNavigation" type="checkbox"  />
                    <span ></span>
                    <span ></span>
                    <span ></span>
                </label>
            </div>
        </div>
    </header>
    <nav id="navigation" >
        <a  href="">Home</a>
        <a  href="">About me</a>
        <a  href="">Portfolio</a>
    </nav>

And here's the javascript:

const navigation = document.getElementById("navigation");
const toggleNavigation = document.getElementById("toggleNavigation");

toggleNavigation.addEventListener("change", function () {
    navigation.classList.toggle("-translate-y-full");
});

CodePudding user response：

As @Boguz commented, just add bg-red-700 to the header class and bg-blue-700 to the nav class and your code works properly.

const navigation = document.getElementById("navigation");
const toggleNavigation = document.getElementById("toggleNavigation");

toggleNavigation.addEventListener("change", function() {
  navigation.classList.toggle("-translate-y-full");
});

<script src="https://cdn.tailwindcss.com"></script>
<header >
  <div >
    <h1><a href="">Project</a></h1>
    <div id="toggleNavigation" >
      <label >
        <input id="toggleNavigation" type="checkbox"  />
        <span ></span>
        <span ></span>
        <span ></span>
      </label>
    </div>
  </div>
</header>
<nav id="navigation" >
  <a  href="">Home</a>
  <a  href="">About me</a>
  <a  href="">Portfolio</a>
</nav>