'Css Relative positioned div after a Fixed div

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 prefer 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>

also codepen, if needed

htmlcsstailwind-css


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mohit Maroliya B17CS036

Related Questions