Tailwind CSS 固定导航栏下滚动时卡片未置于其下方问题求助

根因分析 #

• fixed定位元素会脱离正常文档流，浏览器不会为其在常规布局中预留空间，因此后续页面内容默认会从视口顶部开始渲染，直接与导航栏重叠
• 你的卡片元素设置了relative属性，在没有显式声明z-index的前提下，DOM结构中位置更靠后的relative元素层级会高于前置的fixed元素，因此滚动时卡片会显示在导航栏上方

修复步骤 #

1. 给导航栏添加高优先级z-index类，确保它永远处在内容上层，修改后导航代码如下：

<nav class="bg-indigo-700 fixed inset-x-0 z-50">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between">
      <div class="flex space-x-7">
        <div>
          <!-- 导航原有内容 -->

2. 给页面内容的外层容器添加顶部内边距，数值等于导航栏的实际高度，避开导航栏的占位区域。例如你的导航高度为4rem（对应Tailwind的h-16），就给内容外层添加pt-16：

<!-- 页面内容外层包裹结构示例 -->
<main class="pt-16">
  <!-- 你的卡片代码放在此处 -->
  <div class="w-full flex justify-center no-wrap">
    <div class="bg-white p-8 rounded-lg shadow-lg relative hover:shadow-2xl transition duration-500">
      <h1 class="text-sm text-gray-400 font-semibold mb-1"><%= @question.question_asked_on %>.</h1>
      <h1 class="text-2xl text-gray-800 font-semibold mb-3"><%= @question.title %>.</h1>
      <div class="w-full">
        <p class="text-gray-600 leading-6 tracking-normal">
          <%= @question.body %>
        </p>
      </div>
      <button class="py-2 px-4 mt-8 bg-indigo-600 text-white rounded-md shadow-xl">Learn  More</button>
    </div>
  </div>
</main>

你可以根据导航的实际高度调整pt-*的对应数值即可。

内容的提问来源于stack exchange，提问作者Manav