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

Question

我需要相对元素来表现为静态元素。

我想要肚脐显示在黄色和绿色的部分，就像它显示在蓝色和红色的部分。

我试着用另一个div包装亲戚，但没有成功。如果我想使用relative>absolute技巧，我还能尝试什么呢？

我的最后一招是将绝对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>

​

如果需要的话，也可以编写代码

Answer 1

在nav组件中使用z-10类。

z-10的意思是z-索引: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>

​

也请参阅这里