NextJS Image 組件與其他組件重疊，與 z-index 無關

Question

堆棧：NextJS、JavaScript、React、Tailwind、Framer Motion

我已經搜索了 web 來尋找答案，但大多數答案是說包裝圖像的<div>必須具有相對的 position。 我試過這個並沒有改變任何東西。

文本和圖像的代碼：

    import React from "react";
    import { motion } from "framer-motion";
    import Image from "next/image";

    export default function Card({ image, name, description }) {
      return (
        <motion.div
          className="flex justify-center mt-5"
          initial="hidden"
          animate="visible"
          variants={{
            hidden: { scale: 0.9, opacity: 0 },
            visible: {
              scale: 1,
              opacity: 1,
              transition: { delay: 0.3, ease: [0.17, 0.67, 0.83, 0.67] },
            },
      }}
    >
      <div className="relative">
        <Image
          className="rounded-full absolute"
          src={image}
          width={100}
          height={100}
          alt="Leader profile picture"
        />
      </div>

      <div>
        <motion.h1
          className="text-xl pl-1 font-bourton"
          initial="hidden"
          animate="visible"
          variants={{
            hidden: { scale: 0.9, opacity: 0 },
            visible: {
              scale: 1,
              opacity: 1,
              transition: { delay: 0.35, ease: [0.17, 0.67, 0.83, 0.67] },
            },
          }}
        >
          {name}
        </motion.h1>
        <motion.p className="text-sm p-3 text-wrap w-48 text-slate-600 font-bourton">
          {description}
        </motion.p>
      </div>
    </motion.div>
 

     );
    }

側邊欄的代碼：

    import { useState } from "react";
    import { motion } from "framer-motion";
    import classnames from "classnames";
    import { useRouter } from "next/router";
    
    const path01Variants = {
      open: { d: "M3.06061 2.99999L21.0606 21" },
      closed: { d: "M0 9.5L24 9.5" },
    };
    
    const path02Variants = {
      open: { d: "M3.00006 21.0607L21 3.06064" },
      moving: { d: "M0 14.5L24 14.5" },
      closed: { d: "M0 14.5L15 14.5" },
    };
    
    const Sidebar = () => {
      const [showSidebar, setShowSidebar] = useState(false);
      const [animation, setAnimation] = useState("closed");
      const router = useRouter();
    
      const onClick = () => {
        setAnimation("moving");
        setTimeout(() => {
          setAnimation(animation === "closed" ? "open" : "closed");
        }, 200);
        setShowSidebar(!showSidebar);
      };
      return (
        <>
          {showSidebar ? (
            <button
              className="flex justify-center relative z-100 items-center w-12 h-12 border border-black rounded-full"
              onClick={onClick}
            >
              <svg width="24" height="24" viewBox="0 0 24 24">
                <motion.path
                  stroke="#fff"
                  animate={animation}
                  variants={path01Variants}
                />
                <motion.path
                  stroke="#fff"
                  animate={animation}
                  variants={path02Variants}
                />
              </svg>
            </button>
          ) : (
            <button
              className="flex justify-center top-12 right-12 items-center w-12 h-12 border border-black rounded-full"
              onClick={onClick}
            >
              <svg width="24" height="24" viewBox="0 0 24 24">
                <motion.path
                  stroke="#000"
                  animate={animation}
                  variants={path01Variants}
                />
                <motion.path
                  stroke="#000"
                  animate={animation}
                  variants={path02Variants}
                />
              </svg>
            </button>
          )}
          <div
            className={` bg-unionred border-black opacity-90 top-0 right-0 lg:w-[35vw] sm:w-[50vw] p-10 pl-20 fixed text-white h-full ease-in-out duration-300 ${
              showSidebar ? "translate-x-0" : "translate-x-full"
            }`}
          >
            <button
              className="flex justify-center absolute top-8 right-8 items-center w-12 h-12 border border-white rounded-full"
              onClick={onClick}
            >
              <svg width="24" height="24" viewBox="0 0 24 24">
                <motion.path
                  stroke="#fff"
                  animate={animation}
                  variants={path01Variants}
                />
                <motion.path
                  stroke="#fff"
                  animate={animation}
                  variants={path02Variants}
                />
              </svg>
            </button>
            <h3 className="mt-20 text-4xl underline font-bourton text-white">
              <button className="underline" onClick={() => router.push("whoweare")}>
                Who We Are
              </button>
            </h3>
            <h3 className="mt-20 text-4xl font-bourton text-white">
              <button
                className="underline"
                onClick={() => router.push("ourleaders")}
              >
                Our Leaders
              </button>
            </h3>
            <h3 className="mt-20 text-4xl font-bourton  text-white">
              <button className="underline">News</button>
            </h3>
          </div>
        </>
      );
    };
    
    export default Sidebar;

打開側邊欄之前

打開側邊欄后

任何幫助，將不勝感激。 謝謝你。

Answer 1

看起來您沒有將 z-index 應用於側邊欄本身。 <div>是需要與主要內容重疊的容器，因此您需要在其中添加實用程序 class。

此外，您似乎正在嘗試使用不是 Tailwind 默認值之一的z-100 （請參閱： https://tailwindcss.com/docs/z-index ）。 您可以將該新值添加到您的tailwind.config.js或嘗試z-50 ，這是最高默認值。

例如：

<div className={`z-50 bg-unionred border-black opacity-90 top-0 right-0 lg:w-[35vw] sm:w-[50vw] p-10 pl-20 fixed text-white h-full ease-in-out duration-300 ${showSidebar ? "translate-x-0" : "translate-x-full"}`}>