sticky定位需父容器提供滚动上下文，仅加sticky+top-0+z-10无效；必须父容器设h-screen+overflow-y-auto，sticky元素不能是body直系子元素，且避免transform等触发新层叠上下文。
用 sticky + top-0 + z-10 确实能做出悬浮菜单栏，但光加这三个类往往不生效——根本原因是 sticky 依赖父容器的滚动上下文，不是“设了就悬停”。
为什么 sticky 加了却不动？
常见错误现象：top-0 写了，滚动时菜单跟着滚走，或者压根没反应。这不是 Tailwind 的 bug，是 CSS position: sticky 的行为限制：它只在**父容器有可滚动区域且自身未脱离文档流**时才触发。
- 父容器必须有明确高度或
max-height，且设置了overflow-y: auto（否则没有“滚动上下文”） - 不能给父容器加
transform、perspective或filter——这些会创建新的层叠上下文，让sticky失效 -
z-10只控制层叠顺序，不解决定位失效问题；如果菜单被遮挡，先查是否被overflow: hidden截断
正确写法：最小可用结构
真正起作用的不是单个 class，而是一组配合。下面是最简可靠模板：
<div class="h-screen overflow-y-auto"> <header class="sticky top-0 z-10 bg-white shadow-sm"><nav>...菜单内容...</nav></header><main>...长内容...</main> </div>
关键点：
-
h-screen+overflow-y-auto给父容器提供滚动能力 -
sticky top-0必须在同一元素上，且该元素不能是body直接子元素（Safari 对body子元素的sticky支持差） -
z-10要配bg-white这类背景色，否则悬停后文字可能被下方内容透出干扰
移动端适配和兼容性坑
iOS Safari 和旧版 Android WebView 对 sticky 支持不稳定，尤其在页面有 input 聚焦、软键盘弹出时容易失效。
- 避免在
position: fixed容器里嵌套sticky元素——iOS 会直接忽略 - 如果菜单含下拉子菜单，
sticky元素内部的absolute子元素定位基准是该 sticky 元素，不是视口，所以left: 0是相对菜单左边缘，不是屏幕左边缘 - 测试时务必真机打开，模拟器常误报正常
替代方案：什么时候该放弃 sticky？
当页面结构复杂（比如多层 transform 布局）、或需要支持 iOS 14 以下系统时，sticky 就是不可靠的。这时更稳的做法是监听 scroll，用 JS 切换 fixed 类：
<header id="nav" class="transition-all duration-200">...</header>
JS 部分只需判断 window.scrollY > 50，然后加 fixed top-0 left-0 right-0，同时补 pt-16 到下一个元素防内容上跳——这比硬扛 sticky 的边界条件省心。
最麻烦的从来不是写对那三个 class，而是得时刻记住：CSS sticky 不是“吸顶开关”，它是个看爹妈脸色的定位模式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
