所以，我正在开发一个带有Next.js，基数和成帧器运动的Next.js应用程序。我已经创建了一个带有移动的自适应菜单的导航栏，用成帧器运动进行动画处理，并绝对定位。问题是它没有覆盖我的页面内容。Z索引由于某种原因无法工作。我认为这是因为基数UI主题将默认Z索引设置为零，但我不知道它如何帮助我解决这个问题
下面是NavBar代码：

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

字符串
NavMenu看起来像这样：

<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>

型
值得注意的是，我用radix ui主题 Package 了我所有的代码（NavBar和一个包含纯文本的mainPage）。使用Chrome devtools，我看到它将z-index：0设置为自身。
我尝试设置z-index的巨大值。此外，我尝试将NavMenu移动到NavLogo之外。尝试使用巨大的负值到主页。我也尝试将基数z-index设置为1。没有任何效果。