如何使用Tailwind实现固定不跟随页面滚动的侧边栏？

定位失效排查与修复 #

你添加fixed top-0或sticky top-0不生效可以对照以下场景排查：

使用fixed定位的修复步骤 #

• 打开浏览器开发者工具检查.sidebar元素的样式，确认fixed top-0类没有被更高优先级的自定义CSS覆盖
• 给侧边栏补充宽度和高度配置，比如搭配w-64 h-screen left-0类，避免定位后宽高塌陷
• 给主内容区域添加等于侧边栏宽度的左侧外边距，比如ml-64，防止主内容被侧边栏遮挡

使用sticky定位的修复步骤 #

• 检查侧边栏的所有父级元素，不能出现overflow: hidden、overflow: auto、overflow: scroll属性，只要任意一层父级的overflow值不是visible，sticky就会失效
• 确认侧边栏的直接父元素高度大于侧边栏自身高度，sticky需要父元素有多余的滚动空间才能生效
• 不要将侧边栏和主内容放在同一个flex子容器内且父容器高度仅适配内容，这种场景下sticky没有滚动空间无法生效

最简可运行示例 #

<!-- 固定侧边栏 -->
<div class="sidebar fixed top-0 left-0 h-screen w-64 bg-slate-50 z-10">
  侧边栏导航内容
</div>
<!-- 页面主内容 -->
<div class="ml-64 p-6 min-h-screen">
  长页面内容，滚动时侧边栏不会跟随移动
</div>

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