Css 相对定位 div 在固定 div 之后

Question

我需要相对元素表现得像静态元素。

我希望导航栏显示在黄色和绿色部分，就像显示在蓝色和红色部分一样。

我试图用另一个 div 包裹相关的，但没有成功。如果我想使用相对>绝对技巧，我还能尝试什么？

我的最后一招是将绝对 div 定位为带边距的静态，但如果可能的话，我更喜欢这种方式。

<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

Answer 1

在导航组件中使用 z-10 class。

z-10 表示 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>

另请参考here

Css 相对定位 div 在固定 div 之后

Css Relative positioned div after a Fixed div

html

css

tailwind-css