sticky 失效的根本原因是缺少可滚动祖先元素，需确保父容器 overflow-y: visible 且未创建新层叠上下文；整页导航优先用 sticky top-0，局部滚动区改用 fixed 并手动约束宽度与占位。
为什么 sticky 在 Tailwind 里加了 top-0 却没反应
根本原因不是 Tailwind 写错了，而是浏览器压根没给它“滚动上下文”——sticky 不是相对于视口生效，而是相对于**最近的可滚动祖先元素**。如果导航栏的直系父容器（比如 <header></header> 或某个 <div class="container">）设置了 <code>overflow: hidden、overflow: auto 或 overflow: scroll，粘性行为立刻中断。
常见踩坑点：
- 用
flex布局时父容器加了min-h-screen但忘了设overflow-y: visible（默认是visible，但某些重置样式会改） - 在
<main></main>或<article></article>里嵌套导航，而这些语义标签被 CSS 框架悄悄加了overflow - 父级用了
transform、filter或will-change，创建了新层叠上下文，导致 sticky 失效 - 漏写了
top-0——sticky必须配合top/bottom才激活，只加sticky类无效
用 sticky 还是 fixed？关键看滚动容器范围
如果你的页面是常规文档流滚动（整页上下滑），sticky 是首选：原生、低开销、支持响应式触发位置（比如 top-8 表示滚到离顶部 2rem 时才吸顶）。但如果导航栏放在一个局部可滚动区域（如弹窗、侧边抽屉、卡片内嵌内容区），fixed 反而更可控——因为它始终锚定视口，不依赖父容器是否“可滚动”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 整页导航 → 用
sticky top-0，父容器确保overflow-y: visible - 局部滚动容器里的导航 → 改用
fixed top-0 left-0 right-0，再手动约束宽度（见下一条） - 需要兼容 iOS Safari 13.0 以下或旧版 Android WebView → 回退到 JS +
fixed方案，别硬扛sticky
fixed 导航栏宽度塌陷、错位怎么修
加了 fixed 后导航突然变宽、盖住侧边栏、文字换行异常？这是因为它脱离文档流，width: 100% 现在参考的是 viewport 宽度，而不是你期望的内容区宽度。
正确做法不是调 width，而是用定位约束：
- 若内容区左右有
px内边距（比如md:px-6），导航直接加left-6 right-6 md:left-6 md:right-6 - 若内容区靠
max-w-4xl mx-auto居中，导航需同步：max-w-4xl mx-auto+left-1/2 -translate-x-1/2（注意 fixed 元素的mx-auto无效，必须配 transform） - 避免用
vw单位设left/right，iOS Safari 地址栏收放时会跳变；优先用固定像素或 rem
另外，fixed 必须补占位：给紧接其后的元素加 pt-16（假设导航高 4rem），否则内容会上移被遮住。高度不固定时，用 CSS 变量：style="--navbar-height: 4rem;" + pt-[var(--navbar-height)]。
移动端 Safari 的 top-0 短暂失效怎么办
iOS Safari 在软键盘弹出、地址栏隐藏/显示时会临时重算视口高度，导致 top-0 瞬间偏移——这不是代码问题，是浏览器行为。
两个轻量修复：
- 给导航加
backface-visibility-hidden（Tailwind 对应backface-hidden），强制硬件加速重绘，减少错位概率 - 把
top-0换成top-safe（需启用 Tailwind 的safe-area-inset插件），写成top-[env(safe-area-inset-top)]，适配刘海屏和动态安全区 - 慎用
vh单位（如top-1/2），Safari 对100vh的解析在地址栏变化时极不稳定
最易被忽略的一点：吸顶后阴影、背景或边框可能因脱离文档流而渲染异常，建议显式加 bg-white 和 shadow-sm，别依赖父级继承。
