Why are images that I implement using the <Image > component overlay my fixed header? - css-position

Question

I'm just learning NextJs and in one of my projects I'm implementing images using the component. For styling I use TailwindCSS.
When I start scrolling down on my page, the images overlap my fixed header, which is very unexpected. I've tried different layout options for the image component (responsive, fill, intrinsic) but none of them solve my problem. I also tried to give the component a width and height.
When inspecting the image in the dev-tools I see that the images are positioned absolute, even though I haven't set their position to absolute. Is there a way to prevent the images from overlaying? I've tried to change the position and z-index of the image component but nothing seems to have an effect.
Example-Code of the Navigation Component:
const Nav2 = () => {
return (
<div className="fixed bg-slate-200 w-full">
<ul className="flex gap-3 p-5 justify-end">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div>
);
};
export default Nav2;
Example Code of the Page with the Image
import Image from "next/image";
import Logo from "../public/Fraport_logo.png";
import Nav2 from "../components/Nav2";
const Ihse = () => {
return (
<div>
<Nav2 />
<section className="px-5 py-9 bg-gray-100 pt-20">
<div className="md:max-w-6xl md:mx-auto h-[200vh]">
<div className="md:flex md:flex-row-reverse items-center">
<div className="md:w-1/2 relative">
<Image src={Logo} alt={"alt"} layout="responsive" />
</div>
<div className="md:w-1/2 md:pr-14">
<h3 className="text-2xl font-bold mb-6">Headline</h3>
<p className="mb-6">Lorem Ipsum</p>
</div>
</div>
</div>
</section>
</div>
);
};
export default Ihse;
Thank you in advance

Answer 1

Please add layout="fill" property and objectFit="cover" Property like this
<div className="md:w-1/2 relative">
<Image src={Logo} alt={"alt"} layout="fill" objectFit="cover" />
</div>
and you need to change the position "relative" in the image wrapper div