我有这个问题，从一个部分的图像重叠时，移动导航栏下拉菜单是打开的。我试过添加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 (
<nav className="flex 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>
);
}
这是我的section:
import React from "react";
import type { NextPage } from "next";
import Navbar from "../components/Navbar";
import Head from "next/head";
import Image from "next/image";
import adrian2 from "../public/adrian3.png";
const about: NextPage = () => {
return (
<>
<Head>
<title>Adrián Aranda / About</title>
<meta name="description" content="Generated by create next app" key="Adrian" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Navbar></Navbar>
<div className="p-4 sm:pt-[3vh] projects">
<div className="flex-col sm:flex sm:flex-row px-3 sm:px-24 justify-center items-center align-middle">
<div className="p-2 sm:hidden">
<Image alt="adrian aranda" src={adrian2} className="rounded-3xl" />
</div>
<div className=" w-4/12 hidden m-auto sm:px-5 sm:block relative aspect-square">
<Image alt="adrian aranda" src={adrian2} layout="fill" objectFit="cover" className=" rounded-3xl overflow-clipped" />
</div>
<div className="flex-column sm:w-6/12 sm:px-4 sm:pr-4 m-auto ">
<h3 className="text-white text-[3em] sm:text-[3.5em] transition ease-in-out duration-1000 hover:text-red-400 w-auto inline-block bg-gradient-to-r hover:-translate-y-1">
<strong>Hello there!</strong>
</h3>
</div>
</div>
</div>
</>
);
};
export default about;
代替在About页面导入<navbar />。您可以在_app.js文件中导入导航条和about页面，然后按照如下方式排列它们。
.
.
.
<Navbar />
<About />
.
.
.
或者你可以给这个元素添加' z-10 class '
.
.
.
<div className="gap-10 hidden md:flex z-10">
<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>
.
.
.