My navbar isnt visible when the element with popover is open

i was creating nav with with menu using popover but when popover is open the navbar is hidden i setted the z-index already too many soo it should be highest i thought

navbar links popover code

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

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

i tried to setting z-index and used an absolute, and i was expexting that it'll be visible.

You need to update the value of your z-index in the ```NavbarLinks`` div. You are currently assigning a negative value to it which will cause it to go under.

i.e:

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

change -z-10 to z-10