I’m working on a React project where I have a Header component with a fixed position, and a NavMobile component that handles a dropdown menu for mobile navigation. I want the dropdown (motion.div) to slide down behind the header, making it look like the menu is starting from just below the header, but despite adjusting the z-index, the menu keeps appearing in front of the header.

Here’s what I’ve done so far:

• The header is fixed at the top with z-index: 50.
• The dropdown menu uses Framer Motion for animation and is intended to slide from just below the header.
• I set the motion.div to a lower z-index (e.g., z-10), but it still appears in front of the header.

Despite trying different z-index values, I can’t seem to get the dropdown to slide behind the header.
Here’s a simplified version of my code:

export const Header = () => {
  return (
    <header className='fixed top-0 left-0 right-0 h-[10vh] bg-yellow-200 py-4 px-6  z-50'>
      <div className='flex justify-between items-center h-full'>
        <div className='flex items-center'>
          <Logo />
        </div>
        <div className='flex items-center'>
          <NavDesktop />
          <NavMobile />
        </div>
      </div>
    </header>
  );
};

export const NavMobile = () => {
  const [isOpen, setOpen] = useState(false);
  const ref = useRef(null);

  useClickAway(ref, () => setOpen(false));

  const menuVariants = {
    hidden: {
      y: '-100%',
      opacity: 1,
    },
    visible: {
      y: '0%',
      opacity: 1,
    },
    exit: {
      y: '-100%',
      opacity: 1,
    },
  };

  return (
    <div ref={ref} className='lg:hidden'>
      <div className='relative z-50'>
        <Hamburger toggled={isOpen} size={24} toggle={setOpen} />
      </div>

      <AnimatePresence>
        {isOpen && (
          <motion.div
            className='fixed left-0 w-screen bg-blue-300 z-10'
            style={{
              top: '10vh',
              height: '90vh',
            }}
            initial='hidden'
            animate='visible'
            exit='exit'
            variants={menuVariants}
            transition={{ duration: 0.5 }}
          >
            <div className='w-full h-full'>
              <ul className='grid gap-2 p-4'>
                {routes.map((route) => (
                  <li key={route.title} className='w-full p-[0.08rem]'>
                    <div className='flex items-center justify-between w-full p-5'>
                      <span onClick={() => setOpen(false)}>
                        <a href={route.href} className='text-lg cursor-pointer'>
                          {route.title}
                        </a>
                      </span>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};