为什么 z-index 不适用于动画下拉菜单？

Question

因此，我正在开发一个带有 Next.js、基数和成帧器运动的 Next.js 应用程序。 我已经创建了一个带有移动自适应菜单的导航栏，通过成帧器运动进行动画处理并绝对定位。问题是它没有覆盖我的页面内容。 Z-index 由于某种原因不起作用。我认为这是因为 radix ui 主题将默认 z-index 设置为零，但我不知道它如何帮助我解决这个问题

这是导航栏代码：

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

导航菜单看起来像这样：

<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 主题包装了所有代码（导航栏和内部有纯文本的主页）。使用 chrome devtools 我看到它将 z-index: 0 设置为自身。

我尝试设置巨大的 z-index 值。另外，我尝试将 NavMenu 移到 NavLogo 之外。尝试在主页上使用巨大的负值。我也尝试将基数 z-index 设置为 1。没有任何效果。

Answer 1

事实证明我不需要任何 z-index。我的导航菜单位于其他元素的顶部，但它具有透明的背景。只需将 bg-white 添加到我的 navMenu 内容即可解决问题。