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

Question

我需要相对元素的行为类似于 static 元素。

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

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

我最后的手段是将绝对 div 定位为带有边距的 static，但如果可能的话，我更喜欢这种方式。

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

如果需要，也可以使用 codepen

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>

也可以参考这里