Изображение, закрывающее чат-бот при нажатии, как исправить проблему с многослойностью ⇐ CSS

[Anonymous]

Я создаю веб-приложение, которое включает в себя функцию чат-бота и отображает изображения с помощью компонента Next.js Image. Я столкнулся с проблемой, когда при нажатии на чат-бот, чтобы открыть его, изображения закрывают его.
Я использую компонент изображения внутри контейнера с положением: относительный code>, а чат-бот располагается поверх этого контейнера. Однако, когда чат-бот открывается, он закрывается изображением.
Я также пробовал использовать z-index-es, но он не работает. Если я не использую какое-либо соотношение сторон, изображение больше не закрывает всплывающее окно чат-бота, но размеры изображений уже не одинаковы.
Это мой код:
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 (

Here are some of my favorite projects

{/* MotorBase Project */}




{/* Text Content */}
MotorBase: DBMS

MotorBase is a database aimed at simplifying a local car dealership’s business operations online.


View




{/* Ozon Game Project */}
{/* Removed fixed height */}



{/* Text Content */}
Ozon: Game Developer

A futuristic game set in 2729, tackling pollution with innovative gameplay and interactive design elements.


View





);
}

Это мой соответствующий файл 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 */
}



Подробнее здесь: https://stackoverflow.com/questions/783 ... ring-issue