Position realtive/absolute cause overlap over navbar - css

Question

import React from "react";
import img from '../../../public/images/home/desktop/image-speaker-zx9.png'
export default function Zspeaker()
{
return(
<div className=" mx-auto mt-6 bg-orange-400 w-[85%] rounded-xl ">
<div className=" flex flex-col lg:gap-20 justify-around items-center rounded-xl mx-auto w-[90%] lg:flex-row lg:px-20">
<div className=" relative">
<img className=" w-48 lg:w-64 5" src={img} alt="speaker" />
</div>
<div className="items-center flex flex-col lg:items-start text-white py-7">
<h1 className="text-center text-5xl">ZXP<br></br>Speaker</h1>
<p className="text-center lg:text-justify ">Upgrade to premium speakers that are phenomenally built to deliver truly remarkable sound. </p>
<button className="mt-4 w-1/2 h-11 rounded-xl bg-black hover:scale-105 ease-in duration-500 lg:w-36 ">
Shop Now
</button>
</div>
</div>
</div>
)
}
// Navbar
import React from "react";
import cart from "../assets/images/cart.png"
import { TfiMenu } from "react-icons/tfi";
import { AiOutlineCloseCircle} from "react-icons/ai";
export default function Navbar()
{
const [open,setopen]=React.useState(false)
let Links =[
{name:"Home" ,link:"/"},
{name:"Headphone" ,link:"/"},
{name:"Speaker" ,link:"earphones"},
{name:"Earphone" ,link:"/"},
]
const change=()=>{
setopen(!open)
}
return(
<>
<div className=" z-5000 fixed shadow-md w-full top-0 left-0 ">
<div className=" lg:flex items-center bg-black py-4 md:justify-around">
<div className=" flex justify-between px-3 pt-2 text-white cursor-pointer font-[Poppins]">audiophile
<div onClick={change} className=" lg:hidden w-9 inline-block ">
{open ? <span className=""><AiOutlineCloseCircle/></span>: <span className=""><TfiMenu/></span>}
</div>
</div>
<ul className={`lg:flex md:items-center ${open ?"" :"hidden"} `}>
{
Links.map((link)=>(
<li className=' my-7 ml-8 text-xl '>
<a href={link.link} className='text-white hover:text-yellow-500 duration-500'>{link.name}</a>
</li>
))
}
</ul>
<div className>
<img className="absolute right-20 md:inline-block w-7 cursor- top-5 " src={cart} alt="cart" />
</div>
</div>
</div>
</>
)
}
//Home where all home components are rendered
import React from "react";
import Marktwo from "../Homecomponents/Marktwo";
import Listpage from "../Homecomponents/Listpage";
import Zspeaker from "../Homecomponents/Zspeaker";
export default function Home()
{
return(
<div>
<Marktwo />
<Listpage />
<Zspeaker />
<Zspeaker />
<Zspeaker />
</div>
)
}
Whenever i try to make my div it makes the image of that particular div overlap over navbar when i scrollLike in this picture
my github link this
project:https://github.com/athulmekkoth/ecom/tree/master/client
.........................................................................................................................................................................................................