Tailwind Dashboard中Fixed导航栏显示异常的修复咨询

这是一个基于Tailwind构建的简易Dashboard，核心结构包含侧边栏（sidebar）和主内容区，主内容区的导航栏使用Fixed定位，但出现了导航栏内的Filter输入框和Add按钮部分被遮挡的问题——取消Fixed定位或移除sidebar后显示正常。需要在保留现有结构、且导航栏必须为Fixed定位的前提下修复该问题。

原代码如下：

<div class="flex w-full bg-white">
  <sidebar class="flex h-screen w-64 flex-col justify-between rounded-md transition duration-150 ease-in-out">
    <div class="grow bg-white">
      <div class="flex items-center justify-between px-2 py-5">
        <div class="mr-5 flex items-center">
          <div class="mr-5">
            <div class="relative inline-block shrink-0 cursor-pointer rounded-[.95rem]"></div>
          </div>
          <div class="mr-2"><a href="javascript:void(0)" class="dark:hover:text-primary hover:text-primary text-secondary-inverse text-[1.075rem] font-medium transition-colors duration-200 ease-in-out dark:text-neutral-400/90" target="_blank">sidebar</a><span class="text-secondary-dark block text-[0.85rem] font-medium dark:text-stone-500"></span></div>
        </div>
      </div>
      <div class="w-56 px-2">
        <div class="my-2 rounded-lg bg-[#dce3ef40]"></div>
      </div>
    </div>
  </sidebar>

  <div class="flex h-full h-screen w-full flex-col border-l border-gray-200 bg-gray-100">
    <nav class="fixed w-full border-b bg-white/30 px-16 py-4 backdrop-blur-sm">
      <div class="flex items-center justify-between" style="">
        <h2 class="font-semibold text-slate-900">dataset</h2>
        <div class="flex space-x-4">
          <div class="dark:highlight-white/10 group relative rounded-md dark:bg-slate-700 dark:focus-within:bg-transparent">
            <input type="text" aria-label="Filter" placeholder="Filter..." class="w-full appearance-none rounded-md bg-transparent py-2 pl-10 text-sm leading-6 text-slate-900 shadow-sm ring-1 ring-slate-200 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-2" />
          </div>
          <div class="flex space-x-5">
            <a class="group flex items-center rounded-md bg-blue-500 py-2 pl-2 pr-3 text-sm font-medium text-white shadow-sm hover:bg-blue-400"
              > Add</a
            >
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

问题原因 #

Fixed定位的元素脱离了文档流，原代码中导航栏设置w-full会占据整个视口宽度，但左侧固定宽度的sidebar会覆盖导航栏的左侧区域，同时导航栏的右侧内容会因视口宽度被sidebar占用而被截断、遮挡。

修复方案 #

修改导航栏的Tailwind类，让它避开sidebar的宽度，确保内容完整显示：

<!-- 修改后的nav标签 -->
<nav class="fixed left-64 right-0 border-b bg-white/30 px-16 py-4 backdrop-blur-sm">

说明 #

• left-64：让导航栏的左侧起始位置与sidebar的右侧对齐（sidebar宽度为w-64）
• right-0：让导航栏的右侧贴合视口边缘，自动计算宽度为视口总宽度 - sidebar宽度
• 该修改既保留了Fixed定位和原有结构，又能让导航栏内的Filter输入框、Add按钮完整显示。

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