01 · BASIC RULES
Sticky 至少需要一个偏移值
仅仅写 position: sticky 并不会产生吸附效果。
浏览器还需要知道元素到达哪个位置后开始“粘住”。
.sidebar-sticky {
position: sticky;
top: 96px;
}当前页面顶部 Header 高度为 72px，因此侧栏使用 96px， 在 Header 下方额外保留一些间距。
02 · SCROLL CONTAINER
Sticky 相对最近的滚动容器工作
Sticky 并不一定相对浏览器视口。它会参考最近的可滚动祖先元素。 如果祖先创建了新的滚动容器，Sticky 的行为也会随之改变。
因此排查 Sticky 时，第一件事不是继续增加 z-index，
而是检查它的父级链条里有没有改变滚动上下文的元素。
03 · COMMON FAILURES
为什么 sticky 经常“失效”
忘记 top
没有偏移值，元素没有明确的吸附触发位置。
父级 overflow
祖先创建了新的滚动容器，Sticky 不再相对你预期的页面滚动。
父级高度太短
Sticky 不能越过自己的容器边界，没有足够空间就看不出吸附效果。
元素本身太高
侧栏高度接近或超过视口时，吸附体验会变得很差。
04 · OVERFLOW
overflow 是最值得优先检查的地方
父级如果设置了 overflow: auto、scroll，
或某些情况下的 hidden，就可能改变 Sticky 参照的滚动容器。
body 滚动 → sidebar sticky
parent overflow:auto → sticky 相对 parent
所以遇到“同样的 Sticky 代码，在另一个页面却不工作”时， 很可能不是 Sticky 本身的问题，而是外层布局结构不同。
05 · HEIGHT BOUNDARY
Sticky 永远不能逃离自己的父容器
左侧目录只能在当前两栏布局的高度范围内吸附。 当正文结束、整个 Grid 容器结束时，Sticky 也会停止继续向下移动。
这也是 Sticky 和 position: fixed 最大的差异之一：
Fixed 相对视口，Sticky 仍然受文档结构和父容器边界约束。
06 · COMMON USE CASES