I'm currently using Tailwind CSS and I'm trying to position my navbar on top of an image. The image is set in a relative position and the navbar is set in an absolute position. Surprisingly, when the navbar is not set in the absolute position, I am able to make the items justify between. However, when it is inside an "absolute" position, it doesn't work as expected.
Here is a snippet of my code:
<div className='container max-w-full'>
<div className='h-screen w-full'>
<div className="relative w-max inset-0 -z-1">
<Image
src= {banner}
alt="ic"
sizes="100vw"
className="w-full h-auto opacity-50"
/>
</div>
<h2 className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-slate-700'>
<div className='flex flex-col space-y-5 justify-center items-center text-center'>
<div className='text-7xl font-bold'>Title</div>
<div className='text-7xl'>Title text</div>
<button className='text-2xl bg-sky-700 text-white px-10 py-5 rounded-lg'>Explore</button>
</div>
</h2>
<p className='absolute top-0'>
<div className='flex justify-between'>
<div className='text-3xl p-2'>Logo</div>
<div className='text-3xl p-2'>Menu</div>
<div className='text-3xl p-2'>Menu2</div>
</div>
</p>
</div>
</div>
The issue lies with the part where the navbar is set in the absolute position:
<p className='absolute top-0'>
<div className='flex justify-center items-center text-center'>
<div className='text-3xl p-2'>Logo</div>
<div className='text-3xl p-2'>Menu</div>
<div className='text-3xl p-2'>Menu2</div>
</div>
</p>
It seems like the items are not being justified between, instead, they all stay at the top-left position. Any help on this issue would be greatly appreciated. Thank you!