javascript - Next.js 上使用 Tailwind 的图像重叠导航栏

Question

我遇到这样的问题:当移动设备中的导航栏下拉列表打开时，某个部分的图像会重叠。我尝试过将 z-50 添加到导航栏，但不会产生任何影响。

我希望发生的是，当您从导航栏打开下拉菜单时，图像保持在下方

The image belongs with the orange background, below the black navbar

这是导航栏的代码:

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;

Answer 1

而不是导入<navbar /> 在关于页面。您可以在 _app.js 中导入导航栏和关于页面。文件，然后像这样排列它们。

.
.
.
<Navbar />
<About />
.
.
.

或者，您可以将 `z-10 类添加到此元素 alsi

.
.
.
<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>
.
.
.