[英]Image overlapping navbar on Next.js with Tailwind
当移动设备中的导航栏下拉菜单打开时,我遇到了一个部分中的图像重叠的问题。 我尝试将 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>
);
}
这是我的部分:
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;
而不是在“关于”页面中导入<navbar />
。 您可以在_app.js
文件中同时导入导航栏和关于页面,然后像这样相应地排列它们。
.
.
.
<Navbar />
<About />
.
.
.
或者,您也可以将 `z-10 类添加到此元素
.
.
.
<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>
.
.
.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.