Popover展开时Navbar不可见问题求助（已设置z-index）

问题分析 #

核心问题是原生HTML Popover的特殊堆叠上下文特性：浏览器会自动将带有popover属性的元素放入独立的顶级堆叠上下文，完全不受父元素z-index约束。哪怕给Navbar设置了极高的z-[99999999]，原生Popover仍然会强制覆盖在它上方。

此外代码中还有两个加剧问题的细节：

1. NavbarLinks的外层div设置了-z-10，虽让Popover默认层级极低，但原生Popover展开时会强制提升层级，反而导致Navbar被意外覆盖。
2. NavbarLogo的类名拼写错误（clasName应为className），可能导致其z-index设置失效。

解决方案 #

方案1：改用自定义Popover（推荐，完全可控） #

放弃原生popover属性，用React状态控制菜单显示/隐藏，完全掌控层级关系：

修改NavbarLinks组件

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

import Link from "next/link";
import React, { useState } from "react";
import Ellipse from "../shared/Ellipse";
import NavbarLogo from "./NavbarLogo";

const NavbarLinks = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <>
      {/* 建议将状态提升至Navbar组件，与NavbarMenuButton联动控制 */}
      <button onClick={() => setIsMenuOpen(!isMenuOpen)}>切换菜单</button>
      {/* 自定义菜单容器，移除原生popover属性 */}
      <div
        className={`absolute size-full m-0 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-transparent p-0 ${isMenuOpen ? "block" : "hidden"}`}
        id="navbar"
      >
        <div className="flex flex-col items-center justify-center gap-[30px] size-full bg-white 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="/" className="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;

调整Navbar组件（修正类名+确保层级）

const Navbar = (props: IProps) => {
  return (
    <nav
      className="flex justify-between items-center absolute z-[9999] px-5 py-[13px] bg top-0 w-full"
      {...props}
    >
      <NavbarLanguage />
      <NavbarLinks />
      {/* 修正类名拼写错误 */}
      <NavbarLogo href="/" className="z-10 lg:hidden lg:z-0" />
      <NavbarMenuButton />
    </nav>
  );
};

方案2：保留原生Popover，强制调整层级 #

如果必须使用原生Popover，需直接给Popover元素设置低于Navbar的z-index：

1. 移除错误的负z-index：删掉NavbarLinks中所有-z-10类

<div
  className="absolute size-full m-0 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-transparent p-0"
  popover=""
  id="navbar"
>
  <div className="flex flex-col items-center justify-center gap-[30px] size-full bg-white lg:bg-transparent *:font-cinzelDecorative uppercase lg:flex-row *:lg:flex">
    {/* ... 链接内容 ... */}
  </div>
</div>

2. 添加CSS控制Popover层级：

/* 让Popover层级低于Navbar */
[popover] {
  z-index: 9998 !important;
}

/* 同步调整backdrop层级 */
[popover]::backdrop {
  z-index: 9997 !important;
}

关键提示 #

• 原生Popover的堆叠上下文由浏览器单独管理，父元素的z-index无法影响它，必须直接给Popover元素设置z-index。
• 避免使用负z-index，会导致元素层级不可控。
• 状态提升：若NavbarMenuButton和NavbarLinks是分离组件，建议将菜单显示状态提升至Navbar组件，方便统一控制显示逻辑。

内容的提问来源于stack exchange，提问作者meylis Gurbanmyradow