说明本章要解决的问题与验收。
产品与设计 · 布局基础
吸顶Sticky
让元素滚动越过阈值后贴住指定边缘，同时保留可回滚的文档流位置——它只相对最近可滚动祖先。
滚一遍面板，看 sticky 的三态切换
向下滚到阈值，工具栏从随流切到吸顶；滚回阈值下方又释放。状态徽章和实时 top 坐标都长在工具栏上，不只是底部一句解释。
场景：文档面板里放一个章节工具栏。用按钮驱动面板滚动，看工具栏在 top 阈值前随流、达到 top:0 吸顶、滚回又释放——状态徽章和实时 top 坐标都长在工具栏上。
本章导读
下面的工具栏设了 position: sticky; top: 0。向下滚到阈值，它会钉在面板顶部；滚回阈值下方又回到原位。
分三步实现，每步给出可观察的结果。
键盘可达、移动端不遮焦点、可滚回原位。
记录边界条件与下一步可优化点。
工具栏始终占位（不离流）· 滚回阈值下方即释放 · 不像 fixed 那样浮在内容上
随流中。滚动 0px 未达到阈值 56px，工具栏随内容上移；继续向下滚到阈值即吸顶。
面板里测到的结论
刚才能观察到的切换，对应 sticky 的四条关键性质。
- 必须设 top/right/bottom/left 一个阈值，否则 sticky 退化为 relative，永不吸附。
- sticky 只相对最近可滚动祖先生效；面板滚动时工具栏钉在面板顶，不是视口顶。
- sticky 元素始终占位（不离流），滚回阈值下方能平滑回到原位，不像 fixed 浮在内容上。
- 祖先 overflow: hidden 或高度不足会截断吸附范围，需在真实容器里验收。
什么时候用 sticky
滚动后某块操作或标题需要保持可达时，sticky 比 fixed 更先被考虑。
章节工具栏、表头吸顶、侧栏滚动到顶后钉住、提交按钮随长表单停留——希望保持可见又保留文档流占位。
整页固定导航、全屏弹层或需要脱离文档流的浮层，用 fixed 或 absolute 更合适；sticky 不替代它们。
怎么用才稳
从写一行 CSS 到在真实容器里验收的最短路径。
- 声明阈值。position: sticky; top: 0;（或 right/bottom/left 任选其一），不写阈值不会吸附。
- 确认滚动祖先。最近可滚动祖先要有明确高度和 overflow: auto/scroll；sticky 钉在它的边缘。
- 验收占位与回滚。吸顶后不遮焦点、标题或主操作；滚回阈值下方能回到原位，内容不跳。
同一工具栏：设 top 与忘 top 的对照
目标都是让工具栏在滚动后保持可见。差异只在是否写了 top 阈值这一处。
工具栏写 position: sticky; top: 0，放进可滚动的文档面板。滚到阈值钉住、滚回释放，且始终占位。
差异：设了 top 阈值，吸附点明确。同样写 position: sticky，却忘了 top。没有阈值，工具栏只会随流滚走，用户滚动后看不到它。
差异：只少一处 top 阈值，行为完全不同。快速自测
sticky 工具栏怎么滚都不吸顶，先检查哪一项？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。