NextJS Image component is overlapping other components regardless of z-index

Question

Stack: NextJS, JavaScript, React, Tailwind, Framer Motion

I've scoured the web for answers to this but mostly the answers were saying that the <div> that wraps the image must have a position of relative. I tried this and it didn't change anything.

Code for the text and images:

    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>
 

     );
    }

The code for the sidebar:

    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;

Before opening sidebar

After opening sidebar

Any help would be appreciated. Thank you.

Answer 1

It looks like you're not applying a z-index to the sidebar itself. That <div> is the container that needs to overlap the main content, so that is where you need to add the utility class.

Additionally, it looks like you're trying to use z-100 which is not one of the Tailwind defaults (see: https://tailwindcss.com/docs/z-index ). You can either add that new value to your tailwind.config.js or try z-50 , which is the highest default.

For example:

<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"}`}>