当带有弹出窗口的元素打开时，我的导航栏不可见

Question

我正在使用弹出窗口创建带有菜单的导航，但是当弹出窗口打开时，导航栏被隐藏，我设置的 z 索引已经太多了，所以我认为它应该是最高的

导航栏链接弹出窗口代码

/// <reference types='react/canary' />

import Link from "next/link";
import React from "react";
import Ellipse from "../shared/Ellipse";
import NavbarLogo from "./NavbarLogo";

const NavbarLinks = () => {
  return (
    <div
      className="absolute size-full m-0 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-transparent -z-10 p-0"
      popover=""
      id="navbar"
    >
      <div className="flex flex-col items-center justify-center gap-[30px] size-full bg-white -z-10 lg:bg-transparent *:font-cinzelDecorative uppercase lg:flex-row *:lg:flex">
        <Link href="/home" className={"text text-[15px]"}>
          home
        </Link>
        <Ellipse />
        <Link href="/about" className={"text text-[15px]"}>
          about
        </Link>
        <Ellipse className="hidden lg:block" />
        <NavbarLogo href="/" clasName="hidden lg:block" />
        <Ellipse className=" lg:block" />
        <Link href="/catalog" className={"text text-[15px]"}>
          catalog
        </Link>
        <Ellipse />
        <Link href="/contactUs" className={"text text-[15px]"}>
          contact Us
        </Link>
      </div>
    </div>
  );
};

export default NavbarLinks;

navabr 代码

const Navbar = (props: IProps) => {
  return (
    <nav
      className="flex justify-between items-center absolute z-[99999999] px-5 py-[13px] bg top-0 w-full"
      {...props}
    >
      <NavbarLanguage />
      <NavbarLinks />
      <NavbarLogo href="/" clasName="z-10 lg:hidden lg:z-0" />
      <NavbarMenuButton />
    </nav>
  );
};

我尝试设置 z-index 并使用绝对值，我希望它是可见的。

Answer 1

您需要更新 ``NavbarLinks`` div 中

z-index

的值。您当前正在为其分配负值，这将导致其崩溃。

即：

/// <reference types='react/canary' />

import Link from "next/link";
import React from "react";
import Ellipse from "../shared/Ellipse";
import NavbarLogo from "./NavbarLogo";

const NavbarLinks = () => {
  return (
    <div
      className="absolute size-full m-0 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-transparent z-10 p-0"
      popover=""
      id="navbar"
    >
      <div className="flex flex-col items-center justify-center gap-[30px] size-full bg-white z-10 lg:bg-transparent *:font-cinzelDecorative uppercase lg:flex-row *:lg:flex">
       ...
      </div>
    </div>
  );
};

export default NavbarLinks;

将

-z-10

更改为

z-10