sticky元素的top/bottom偏移参考最近块级祖先（BFC容器），而非父元素是否relative或视口；其粘性生效区间则依赖最近滚动祖先，若无已定位祖先则默认吸附视口顶部。
sticky 元素的 top/bottom 偏移到底参考谁？
它不看父元素有没有 position: relative，也不直接按视口算——而是以「最近的块级祖先容器」为基准计算 top 和 bottom 值。这个容器不一定是已定位祖先，可以是普通 <div>、<section> 等块级元素，只要它在文档流中形成一个独立的块格式化上下文（BFC）即可。
但它的“粘性生效区间”又受另一个规则约束：必须存在一个「最近的已定位祖先」（position: relative/absolute/fixed/sticky）或视口边界，否则它会直接固定在视口里，失去“滚动中吸附”的行为。
- 没设任何
position的祖先？top: 20px仍生效，但 sticky 会一路吸到视口顶部，不是你想要的“在某个区域里粘” - 祖先用了
transform: scale(1)或will-change: transform？它会意外成为包含块，导致top基准突变 - 父容器有
overflow: hidden且设了max-height？这才是 sticky 能“被截停”的关键条件，否则它根本不会触发粘性切换
为什么 height: 100% 在 sticky 里常失效，而 top: 0 却能用？
height: 100% 需要包含块有明确高度值（不能是 height: auto），但 sticky 元素的包含块（那个块级祖先）往往就是 height: auto 的——所以它撑不开，也不继承。
而 top: 0 是偏移量，不依赖高度继承，只关心“从哪开始算 0”。只要包含块存在，哪怕高度是 auto，top: 0 就能把它钉在该块顶部起始位置。
立即学习“前端免费学习笔记（深入）”；
- 想让 sticky 区域有固定高度？别靠
height: 100%，显式写height: 60px或用min-height - 用
top: 0+bottom: 0拉高？只有当包含块有确定高度时才有效，否则 bottom 会退化为 auto - 开发者工具里看到 computed
top是 0，但元素没贴顶？检查是否被祖先的padding-top或border-top推开了——sticky 的偏移是从包含块的 content box 起算的
box-sizing 对 sticky 元素的尺寸控制有没有影响？
有，而且容易被忽略：box-sizing 不影响粘性行为本身，但它决定你写的 width 和 height 是否“如你所见”。比如你设了 width: 300px; padding: 12px; border: 1px solid，默认 box-sizing: content-box 下，实际占宽是 326px；换成 border-box，才是真·300px。
这对 sticky 尤其关键，因为 sticky 元素常作为导航栏、侧边栏等需要精确对齐的组件，一旦尺寸溢出或缩进，就会和兄弟元素错位。
- 全局重置推荐：
* { box-sizing: border-box; }，避免个别元素漏设 - sticky 元素加了
border又没设box-sizing？它可能比设计稿宽出几个像素，右侧内容被挤换行 - 用
calc()手动减去 padding？没必要，border-box就是为此而生的
sticky 和 absolute 共存时，包含块怎么选？
sticky 元素如果同时满足两个条件：父级是已定位元素（如 position: relative），自身又设了 top，那它的偏移基准仍是块级祖先，不是那个 relative 父级——除非你把 sticky 元素直接塞进那个父级内部，并确保父级是块级且形成了 BFC。
更常见的情况是：你在 .header（position: relative）里放了一个 .nav（position: sticky），结果 .nav 的 top 却没按 .header 顶部算，而是按整个页面顶部算。问题往往出在 HTML 结构上：.nav 实际不在 .header 内部，或者 .header 被 display: flex 或 display: grid 干扰了 BFC 形成。
- 检查 DOM 层级：sticky 元素必须是目标块级祖先的**直系子元素**，嵌套太深会跳过中间层
- 避免用
float或inline-block包裹 sticky 元素，它们不创建 BFC - 父容器加了
overflow: hidden但没设height或max-height？sticky 仍会吸到视口，不是容器顶部
真正难搞的点不在语法，而在“你以为的包含块”和浏览器实际采用的包含块之间，差了一个没声明的 position、一行多余的 transform、或一个被忽略的 overflow。
