Why does z-index does not work on animated dropdown menu?

Question

So, I am developing a Next.js application with a Next.js, radix and framer motion. I already created a nav bar with a mobile adaptive menu, animated with framer motion and positioned absolutely. The problem is it does not cover my page content as it has to. Z-index does not work by some reason. I think that`s because of radix ui themes that sets default z-index to zero, but I dont know how it can help me with solving this problem

Here is NavBar code:

// NavBar.tsx
export default function NavBar() {
  const [isOpen, setOpen] = useState(false);
  return (
    <Flex
      justify="between"
      align="center"
      className="mx-auto w-full lg:w-[92%] border p-4 items-center relative"
    >
      <NavLinks />
      <NavLogo>
        <NavMenu isOpen={isOpen} setOpen={setOpen} />
        {/* Escape prop drilling using component composition */}
      </NavLogo>
      <NavControl />
    </Flex>
  );
}

And NavMenu looks like this:

<Flex direction="column" className="lg:hidden">
      <Hamburger
        toggled={isOpen}
        toggle={setOpen}
        size={32}
        direction="right"
      />
      <AnimatePresence>
        {isOpen && (
          <motion.div
            key="nav-content"
            className="flex flex-col absolute left-0 top-[86px] shadow-md h-auto w-full p-4 gap-3 overflow-hidden items-center z-50"
            initial={{ height: 0 }}
            animate={{ height: "auto" }}
            exit={{ height: 0, padding: 0 }}
            transition={{ duration: 0.1 }}
          >
            {navigation.map((navLink) => (
              <motion.a
                key={navLink.href}
                initial={{ x: -500 }}
                animate={{ x: 0 }}
                exit={{ x: -500 }}
                className="overflow-hidden hover:text-gray-400"
                transition={{ duration: 0.3 }}
              >
                <Link href={navLink.href}>{navLink.label}</Link>
              </motion.a>
            ))}
            <SignUpButton />
          </motion.div>
        )}
      </AnimatePresence>
    </Flex>

It's also worth noting that i wrapped all my code (NavBar and a mainPage that has plain text inside) with radix ui themes. Using chrome devtools i saw that it sets z-index: 0 to itself.

I tried setting huge values of z-index. Also, I tried moving NavMenu outside of the NavLogo. Tried using huge negative values to the main page. I alsso tried setting radix z-index to 1. Nothing worked.

Answer 1

It turns out that I did not need any z-index. My NavMenu was on the top of the other elements but it had transparent bg. Problem solved by just adding bg-white to my NavMenu content.