I’m building a web application that includes a chatbot feature and displays images using the Next.js Image component. I’ve encountered an issue where, when the chatbot is clicked to open, the images cover over the chatbot.

I’m using the Image component inside a container with position: relative, and the chatbot is positioned on top of this container. However, when the chatbot is clicked to open, it gets covered by the image.

I’ve tried using z indexes as well but it’s not working. If I don’t use some kind of aspect ratio the image no longer covers the chatbot pop up but the images are no longer the same sizes.

This is my code:

import { H3 } from "@/components/ui/H3";
import { H2 } from "@/components/ui/H2";
import Image from 'next/image';
import Link from 'next/link';
import motorbase from "@/assets/motorbase.webp";
import ozon from "@/assets/ozon.png";
const motorbasePdfPath = "/MotorBaseSchema.pdf";
const motorbasepath = "/projects/motorbaseproject";
import { Metadata } from "next";
export const metadata: Metadata = {
  title: "Projects",
  description: "favorite projects",

};
export default function Page() {
  return (
    <section className="text-black dark:text-white p-8">
      <H3 className="text-center mb-10">Here are some of my favorite projects</H3>
      <section className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {/* MotorBase Project */}
        <section className="flex flex-col overflow-hidden rounded-lg">
        <div className="aspect-ratio">
  <Image src={motorbase} alt="MotorBase" layout="fill" />
</div>

          <section className="p-4"> {/* Text Content */}
            <H2>MotorBase: DBMS</H2>
            <p className="text-sm my-4 dark:text-gray-300">
              MotorBase is a database aimed at simplifying a local car dealership’s business operations online.
            </p>
            <a href={motorbasePdfPath} target="_blank" rel="noopener noreferrer" >
              <p className="inline-block bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition-colors duration-300">View</p>
            </a>
          </section>
        </section>

        {/* Ozon Game Project */}
        <section className="flex flex-col overflow-hidden rounded-lg"> {/* Removed fixed height */}
        <div className="aspect-ratio">
  <Image src={ozon} alt="Ozon Game" layout="fill" />
</div>


          <div className="p-4"> {/* Text Content */}
            <H2>Ozon: Game Developer</H2>
            <p className="text-sm my-4 dark:text-gray-300">
              A futuristic game set in 2729, tackling pollution with innovative gameplay and interactive design elements.
            </p>
            <a href = "https://github.com/m-shahzad1/OZON" >
              <p className="inline-block bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition-colors duration-300">View</p>
            </a>
          </div>
        </section>
      </section>
    </section>
  );
}

This is my relevant globals.css

.image-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* Assuming 16:9 aspect ratio. Adjust as needed */
}

.aspect-ratio img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Or any other value you need */
}