Css Relative positioned div after a Fixed div-CodePudding

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 >
  <button >nav btn</button>
  <button >nav btn</button>
</nav>
<div ></div>
<div >regular content, nav is visible as desired</div>
<div >
  <div >fancy positioned content, nav is gone</div>
</div>
<div >
  <div >fancy positioned content</div>
</div>

also codepen, if needed

CodePudding user response：

Use z-10 class in nav component.

z-10 means z-index:10 .

<script src="https://cdn.tailwindcss.com"></script>
<nav >
  <button >nav btn</button>
  <button >nav btn</button>
</nav>
<div ></div>
<div >regular content, nav is visible as desired</div>
<div >
  <div >fancy positioned content, nav is gone</div>
</div>
<div >
  <div >fancy positioned content</div>
</div>

Refer also here