Div overlapping another elements making it non clickable tailwindcss - html

Question

I'm using tailwindcss inn reactjs which has div element divided into two parts, one is 9-12 and the second is 3-12. The 9-12 part is overlapping navbar one element and I'm able to click that element, but the 3-12 part overlaps 3 elements i.e. Experinece, Projet and Contact in navbar, which is not clickable.
Here's the code for navbar section:
<nav className="bg-gray-900 fixed w-full">
<div className="max-w-7xl mx-auto px-8">
<div className="flex items-center justify-between h-24">
<div className="w-full justify-between flex items-center">
<a className="flex-shrink-0" href="/">
<img
className="h-20 w-20 mt-4"
src={logo}
alt="Pradeep Anand"
/>
</a>
<div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4">
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
About
</a>
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-delay="100"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
Experience
</a>
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-delay="200"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
Project
</a>
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-delay="300"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
Contact
</a>
</div>
</div>
</div>
<div className="block">
<div className="ml-4 flex items-center md:ml-6"></div>
</div>
<div className="-mr-2 flex md:hidden">
<button className="text-gray-800 dark:text-white hover:text-gray-300 inline-flex items-center justify-center p-2 rounded-md focus:outline-none">
<svg
width="20"
height="20"
fill="currentColor"
className="h-8 w-8"
viewBox="0 0 1792 1792"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"></path>
</svg>
</button>
</div>
</div>
</div>
</nav>
Here's the code for another component:
<div className="flex px-48 flex-wrap">
<div className="w-9/12 pt-32 pb-10">
<h2
className="text-2xl text-pink-600 intro"
data-aos="fade-up"
data-aos-delay="300"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
>
Hi, my name is
</h2>
<br />
<h1
className="text-8xl"
data-aos="fade-up"
data-aos-delay="500"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
>
Pradeep
<br />
Anand
</h1>
<div
className="w-16 h-2 bg-pink-800 mt-3"
data-aos="fade-right"
data-aos-delay="300"
data-aos-anchor-placement="top-bottom"
/>
<button
className="my-28 px-6 py-4 transition ease-in duration-200 uppercase rounded-md hover:bg-pink-800 hover:bg-opacity-30 hover:text-white border-2 border-pink-900 focus:outline-none"
data-aos="fade-up"
data-aos-delay="500"
data-aos-duration="1000"
data-aos-anchor-placement="top-bottom"
>
Get In Touch
</button>
</div>
<div
className="w-3/12 pt-48"
data-aos="fade-left"
data-aos-delay="800"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
>
<h3 className="text-sm text-pink-800 font-bold intro">
Introduction
</h3>
<h4 className="text-4xl py-4">
Software Developer by Profession. Web Dev by passion.
</h4>
<p>I'm a software engineer from India. I make things for web.</p>
</div>
</div>

Answer 1

please provide z-index to the nav bar to avoid this . since it has position fixed property