I need the relative element to behave like the static elements.
I want the navbar to be shown over yellow and green parts just like it is shown over blue and red parts.
I was trying wrapping the relative ones with another div, but was unsuccessful. What else can I try if I want to use relative>absolute trick?
My last resort would be positioning the absolute div as static with margins, but I would preffer this way, if possible.
<script src="https://cdn.tailwindcss.com"></script>
<nav class="h-20 w-full bg-gray-400 fixed top-0 left-0">
<button class="border-2 border-red-500 h-full px-6">nav btn</button>
<button class="border-2 border-red-500 h-full px-6">nav btn</button>
</nav>
<div class="h-screen w-full bg-red-200"></div>
<div class="h-screen w-full bg-blue-200">regular content, nav is visible as desired</div>
<div class="h-screen w-full bg-yellow-200 relative">
<div class="absolute top-8 right-8 border-[24px] border-white w-[250px] h-[250px]">fancy positioned content, nav is gone</div>
</div>
<div class="h-screen w-full bg-green-200 relative">
<div class="absolute top-8 right-8 border-[24px] border-white w-[250px] h-[250px]">fancy positioned content</div>
</div>>Solution :
Use z-10 class in nav component.
z-10 means z-index:10 .
<script src="https://cdn.tailwindcss.com"></script>
<nav class="h-20 w-full bg-gray-400 fixed top-0 left-0 z-10">
<button class="border-2 border-red-500 h-full px-6">nav btn</button>
<button class="border-2 border-red-500 h-full px-6">nav btn</button>
</nav>
<div class="h-screen w-full bg-red-200"></div>
<div class="h-screen w-full bg-blue-200">regular content, nav is visible as desired</div>
<div class="h-screen w-full bg-yellow-200 relative">
<div class="absolute top-8 right-8 border-[24px] border-white w-[250px] h-[250px]">fancy positioned content, nav is gone</div>
</div>
<div class="h-screen w-full bg-green-200 relative">
<div class="absolute top-8 right-8 border-[24px] border-white w-[250px] h-[250px]">fancy positioned content</div>
</div>Refer also here