Next.js+Tailwind移动端导航栏下拉时图片重叠问题求助

使用 Next.js + Tailwind CSS 开发时，移动端打开导航下拉菜单后，页面中的图片会与菜单重叠。已尝试给导航栏添加 z-50 类，但无效果，期望菜单显示在图片上方。

原因分析 #

下拉菜单 MobileNav 使用了 absolute 定位，但它的父元素 <nav> 未设置 position: relative，导致菜单的定位上下文是页面根元素 body，而非导航栏。此时 z-50 的层级无法正确覆盖页面内的图片元素（页面内容渲染顺序靠后，默认层级更高）。

解决方案 #

给导航栏的 <nav> 元素添加 relative 类，让下拉菜单的 absolute 定位以导航栏为上下文，同时保留菜单的 z-50 类确保层级优先级。

修改后的导航栏组件代码 #

import React from "react";
import Link from "next/link";
import { useState } from "react";

function MobileNav({ open, setOpen }: any) {
  return (
    <div
      className={`absolute z-50 top-0 h-fit pb-5 left-0 w-screen bg-black transform ${
        open ? "-translate-y-0" : "-translate-y-full"
      } transition-transform duration-300 ease-in-out filter drop-shadow-md`}
    >
      <div className="text-white font-vietnam text-2xl bg-growing-underline flex items-center justify-center filter drop-shadow-md h-20">
        <Link href="/">
          <a>MENU</a>
        </Link>
      </div>
      <div className="flex flex-col bg-black gap-7 pl-4">
        <Link href="/about">
          <a
            className=" text-white text-lg"
            onClick={() =>
              setTimeout(() => {
                setOpen(!open);
              }, 100)
            }
          >
            About
          </a>
        </Link>
        <Link href="/projects">
          <a
            className=" text-white text-lg"
            onClick={() =>
              setTimeout(() => {
                setOpen(!open);
              }, 100)
            }
          >
            Projects
          </a>
        </Link>
        <Link href="/resume">
          <a
            className=" text-white text-lg pb-3"
            onClick={() =>
              setTimeout(() => {
                setOpen(!open);
              }, 100)
            }
          >
            CV
          </a>
        </Link>
      </div>
    </div>
  );
}

export default function Navbar() {
  const [open, setOpen] = useState(false);
  return (
    {/* 添加 relative 类作为下拉菜单的定位上下文 */}
    <nav className="flex relative align-middle filter drop-shadow-md bg-black items-center justify-between h-16 px-5 sm:px-10">
      <MobileNav open={open} setOpen={setOpen} />
      <div>
        <Link href="/">
          <a className="text-white font-vietnam text-xl sm:text-3xl whitespace-nowrap inline-block bg-gradient-to-r hover:-translate-y-1.5 from-yellow-50 to-yellow-100 bg-growing-underline hover:text-black">
            ADRIAN ARANDA
          </a>
        </Link>
      </div>
      <div className="flex justify-end items-center">
        <div
          className="z-50 flex relative w-7 h-7 flex-col justify-between items-center md:hidden"
          onClick={() => {
            setOpen(!open);
          }}
        >
          {/* hamburger button */}
          <span className={`h-1 w-full bg-white rounded-lg transform transition duration-300 ease-in-out ${open ? "rotate-45 translate-y-3" : ""}`} />
          <span className={`h-1 w-full bg-white rounded-lg transition-all duration-300 ease-in-out ${open ? "w-0" : "w-full"}`} />
          <span className={`h-1 w-full bg-white rounded-lg transform transition duration-300 ease-in-out ${open ? "-rotate-45 -translate-y-3" : ""}`} />
        </div>
        <div className="gap-10 hidden md:flex">
          <Link href="/about">
            <a className="text-white whitespace-nowrap transition ease-in-out hover:-translate-y-1 active:scale-110 active:text-zinc-900 active:skew-y-6 duration-400">
              About Me
            </a>
          </Link>
          <Link href="/projects">
            <a className="text-white whitespace-nowrap transition ease-in-out hover:-translate-y-1 active:scale-110 active:text-zinc-900 active:skew-y-6 duration-400">
              Projects
            </a>
          </Link>
          <Link href="/resume">
            <a className="text-white whitespace-nowrap transition ease-in-out hover:-translate-y-1 active:scale-110 active:text-zinc-900 active:skew-y-6 duration-400">
              CV
            </a>
          </Link>
        </div>
      </div>
    </nav>
  );
}

说明 #

• relative 让 <nav> 成为下拉菜单的定位容器，确保 z-50 的层级计算基于导航栏而非整个页面。
• 保留 MobileNav 的 z-50 类，保证菜单始终处于页面内容（包括图片）的上方。

内容的提问来源于stack exchange，提问作者Adrian Aranda