如何在另一个固定div下用尾风管制作一个固定div

Question

我试图通过点击屏幕右上角的汉堡包菜单，使导航菜单从上到下移动。

但是导航菜单与我的标题重叠。我希望导航菜单在标题下面。我试过z-index，但它对我不起作用。

我遗漏了什么？

​

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 class="p-4 border-b fixed top-0 left-0 right-0 z-10 relative">
  <div class="max-w-4xl mx-auto flex justify-between relative">
    <h1><a href="">Project</a></h1>
    <div id="toggleNavigation" class="">
      <label class="cursor-pointer flex flex-col w-5 h-5 justify-between overflow-hidden position">
        <input id="toggleNavigation" type="checkbox" class="peer appearance-none" />
        <span class="bg-black h-0.5 w-5 transition-all origin-left peer-checked:rotate-[42deg]"></span>
        <span class="bg-black h-0.5 w-5 transition-all peer-checked:bg-opacity-0"></span>
        <span class="bg-black h-0.5 w-5 transition-all origin-left peer-checked:-rotate-[42deg]"></span>
      </label>
    </div>
  </div>
</header>
<nav id="navigation" class="flex flex-col divide-y transition-all -translate-y-full fixed top-14 right-0 left-0">
  <a class="p-4" href="">Home</a>
  <a class="p-4" href="">About me</a>
  <a class="p-4" href="">Portfolio</a>
</nav>

​

Answer 1

只需将bg-red-700添加到header类，将bg-blue-700添加到nav类，代码就能正常工作。

​

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 class="bg-red-700 p-4 border-b fixed top-0 left-0 right-0 z-10 relative">
  <div class="max-w-4xl mx-auto flex justify-between relative">
    <h1><a href="">Project</a></h1>
    <div id="toggleNavigation" class="">
      <label class="cursor-pointer flex flex-col w-5 h-5 justify-between overflow-hidden position">
        <input id="toggleNavigation" type="checkbox" class="peer appearance-none" />
        <span class="bg-black h-0.5 w-5 transition-all origin-left peer-checked:rotate-[42deg]"></span>
        <span class="bg-black h-0.5 w-5 transition-all peer-checked:bg-opacity-0"></span>
        <span class="bg-black h-0.5 w-5 transition-all origin-left peer-checked:-rotate-[42deg]"></span>
      </label>
    </div>
  </div>
</header>
<nav id="navigation" class="bg-blue-700 flex flex-col divide-y transition-all -translate-y-full fixed top-14 right-0 left-0">
  <a class="p-4" href="">Home</a>
  <a class="p-4" href="">About me</a>
  <a class="p-4" href="">Portfolio</a>
</nav>

​