position: sticky导航栏不生效，主因是未设top值、父容器切断滚动上下文或元素不在可滚动文档流中；必须设top（如top: 0）、确保父容器overflow: visible且无transform/filter、并验证computed样式中position确为sticky。
粘性定位导航栏在 index.html 中不生效，90% 是因为没满足三个硬性条件：写了 position: sticky 但漏了 top 值、父容器切断了滚动上下文、或元素本身不在可滚动的文档流路径上。
为什么 position: sticky 写了却完全不动
它不是“一设就粘”，而是个带触发条件的状态机。只写 position: sticky 浏览器直接当 position: relative 处理——top 值是开关，不是可选项。
-
top: 0是最安全的起点，尤其对导航栏；top: 64px适合避开顶部 banner - 不能同时写
top和bottom，部分浏览器会整条声明忽略 - 检查开发者工具的 “Computed” 面板，确认最终生效的
position真的是sticky，而不是回退成了relative
父容器怎么悄悄让 sticky 失效
sticky 的吸附范围由**最近的、可滚动的、非 static 定位祖先**决定。只要父级加了以下任意一条，它就大概率失效：
-
overflow: hidden、overflow: auto、overflow: scroll—— 创建新块格式化上下文，直接切断滚动链 -
transform: translateZ(0)、filter: blur(1px)、will-change: transform—— Safari 尤其敏感，隐式创建层叠上下文 - Flex 容器设了
align-items: stretch，旧版 Safari 可能忽略top偏移
临时排查：用开发者工具逐级关闭父元素的 overflow 和 transform，看是否恢复；或者把父容器临时改成 overflow: visible 测试。
立即学习“前端免费学习笔记（深入）”；
在 index.html 中布局时容易踩的结构坑
常见错误不是 CSS 写错，而是 HTML 结构把 sticky 元素“包死了”：
- 别把
<header>套进一个<div class="wrapper">里，而这个div又设了overflow: hidden—— 这个div就成了 sticky 的“牢笼” - 如果页面用 React/Vue，框架可能自动包裹一层匿名
div，它没有高度也没有滚动能力，导致 sticky 找不到有效祖先 -
<header>必须是<body>直接子元素，或至少其最近可滚动祖先（比如<main>）设置了max-height+overflow-y: auto - 记得显式设置
z-index（推荐 ≥ 1000），否则滚动时可能被后续内容遮盖
移动端和旧浏览器的真实兼容性底线
2026 年主流浏览器基本支持，但两个细节仍常翻车：
- iOS Safari 15.4 之前存在滚动抖动，升级后缓解；若需支持更老版本，必须用
IntersectionObserver替代scroll事件监听（避免卡顿） - IE 全系列不支持
sticky，必须降级为 JS 模拟或改用position: fixed（注意：fixed 需手动预留padding-top给正文） - 打印 PDF 时，
sticky默认退化为relative，而fixed仍强制固定——导出前要单独写@media print样式覆盖
真正难的不是写出来，而是判断它该不该用：如果侧边栏或导航栏需要随父容器自然进出视口（比如嵌在某个卡片内滚动），sticky 才有意义；否则，fixed 更稳、更可控、更少意外。
