position: sticky 不生效通常因祖先元素设置了 overflow: hidden/auto/scroll，导致粘性失效；需逐层检查至 body，注意 min-height、transform、flex 布局及 top 值设置，并预留占位避免遮挡。
position: sticky 不生效，先查父容器 overflow
绝大多数 position: sticky 失效，不是因为你没写 top，而是某个祖先元素悄悄加了 overflow: hidden、overflow: auto 或 overflow: scroll。sticky 的“吸附”行为只在「最近的可滚动祖先」范围内生效；一旦这个祖先被裁剪（比如设了 overflow: hidden），粘性就直接失效。
检查路径必须向上逐层看：从导航栏自身开始，一直查到 body —— 特别注意中间的 .layout、main、section 等包裹容器。常见踩坑点：
-
min-height: 100vh比height: 100%更安全，Safari 对后者高度计算异常时会禁用 sticky - 带
transform、filter或will-change的父元素，会创建新层叠上下文，同样切断粘性 - Flex 容器中若子项未设
min-height，且父项align-items: stretch，可能造成高度计算为 0
top 值不是“距视口顶部距离”，而是“距原始位置偏移量”
top: 0 表示元素滚动到它原本所在位置的顶部时，立刻吸附；top: 20px 表示还剩 20px 才滑出视口时就开始吸顶。这个值必须显式设置，只写 position: sticky 不会触发任何行为。
实际使用建议：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 固定高度导航栏：直接写
top: 0最稳妥 - 响应式导航（如折叠菜单）：避免用动态
top，改用 JS 监听resize和 DOM 变更后重设top，或统一用min-height锁定最小吸附起始点 - 不要依赖 JavaScript 计算
top值来“模拟” sticky —— 那是退化方案，不是补救
吸顶后内容被遮盖？不是 bug，是文档流仍在原位
position: sticky 元素仍占据原始文档流空间，视觉上“浮”上去，但下方内容不会自动下移。所以你看到文字被盖住，本质是没预留空间。
纯 CSS 解决方式（推荐）：
- 给紧接在导航栏后的第一个元素加
margin-top，值等于导航栏高度（如margin-top: 60px） - 若高度不固定（多行文字、响应式折叠），用
padding-top+box-sizing: border-box更稳 - 绝对不要用
position: fixed替代后不补高 —— 后续内容会上移，页面布局错乱
CSS.supports 检测不等于真正可用
CSS.supports('position', 'sticky') 返回 true，只说明浏览器识别该语法，不代表当前环境一定能用。Android 4.4 及更早 WebView、某些旧版 Safari、甚至部分 Electron 内嵌渲染器，都存在“支持声明但不执行”的情况。
真正在意兼容性时，必须结合运行时验证：
- 手动创建一个
position: sticky元素，插入 DOM，用getBoundingClientRect()观察其top是否随滚动变化 - 降级逻辑不能只靠 CSS 类切换，要同步处理占位：fixed 时给
body加padding-top，sticky 恢复时移除 - 最麻烦的不是写那行
position: sticky，而是它被截断的位置往往在导航栏上方第三层的overflow: hidden容器里 —— 那个容器你可能根本没意识到它会影响定位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
