Tailwind CSS固定侧边栏导致相邻Div被遮挡，如何解决？

问题根源很明确：固定定位(fixed)的元素会脱离正常文档流，父级的flex布局无法识别它的存在，导致Dashboard直接占据整个容器宽度，被侧边栏遮挡。

下面给你三种可行的解决方法：

方法1：给Dashboard添加动态左边距 #

根据侧边栏展开/收起的状态，给Dashboard设置对应的左边距，同时让它占满剩余空间并处理自身滚动：

修改父组件代码：

<div className="relative h-full min-h-screen flex">
  <Sidebar />
  <!-- 把open状态传递给Dashboard，或者在Dashboard内部处理状态 -->
  <Dashboard className={`${open ? "ml-[18rem]" : "ml-[5rem]"} flex-1 overflow-y-auto`} />
</div>

同时建议把侧边栏的z-0改成z-10，确保侧边栏始终在Dashboard上方，避免内容层级混乱。

方法2：改用Grid布局 #

用Grid布局定义固定列宽，给Dashboard容器添加匹配的内边距，确保空间预留：

父组件修改为：

<div className="relative h-full min-h-screen grid grid-cols-[auto_1fr]">
  <Sidebar className="fixed min-h-screen z-10" />
  <div className={`${open ? "pl-[18rem]" : "pl-[5rem]"} overflow-y-auto`}>
    <Dashboard />
  </div>
</div>

这种方式更直观，Grid的列结构能清晰区分侧边栏和主内容区的空间分配。

方法3：用sticky替代fixed（如果需求允许） #

如果你的侧边栏只需要在滚动时保持固定（而非完全脱离文档流），可以用sticky替代fixed，这样flex布局会自动为侧边栏预留空间，无需额外调整：

修改侧边栏的className：

<div className={`flex sticky top-0 ${open ? "min-w-[18rem]" : "min-w-[5rem]"} z-10 min-h-screen flex-col shadow-2xl overflow-y-auto bg-white`}

这种方式最简单，且能保持侧边栏在滚动时固定在左侧，同时不会破坏原有flex布局的空间分配。

额外注意事项 #

• 侧边栏的滚动建议用overflow-y-auto，只有内容超出时才显示滚动条，体验更好
• 主内容区的滚动交给Dashboard容器处理，避免整个页面滚动导致布局混乱

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