NextJS Image组件无视z-index与其他组件重叠问题求助

技术栈 #

• NextJS
• JavaScript
• React
• Tailwind CSS
• Framer Motion

问题详情 #

当页面侧边栏展开后，我页面中的Card组件内的Next.js Image布局出现异常。我搜索了相关解决方案，大部分建议给包裹Image的div设置position: relative，但尝试后没有任何改善。

代码片段 #

Card组件（文本与图片） #

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;

效果对比 #

恳请各位提供帮助！谢谢。

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