sticky元素仅在最近可滚动祖先容器内生效，超出即退化为relative；需确保父容器有overflow:auto/scroll、显式高度且不触发新层叠上下文，top值应匹配元素原始文档流位置。
sticky元素只在父容器内生效，不是视口级固定
position: sticky 的吸附范围永远受限于「最近的可滚动祖先容器」，它不会跨出这个容器边界。比如给 .sidebar 加 position: sticky; top: 0，但它的父容器 .section 高度只有 400px 且设了 overflow-y: auto，那它就只在这个 400px 区域里粘，滚出这个区域就回归文档流——这不是 bug，是规范行为。
常见误判：看到侧边栏“掉下去”就以为 sticky 失效，其实是它完成了使命。要让它在整个页面都吸顶，得确保它的滚动上下文是 body 或一个高度足够、overflow: visible 的大容器。
- 用浏览器开发者工具选中 sticky 元素，在 Computed 面板看
position值：滚动时若变回relative，说明已脱离滚动上下文 - 检查从目标元素向上直到
body的每一层：有无overflow: hidden、overflow: auto、transform、filter或will-change - 若必须限制高度，用
max-height: 600px; overflow-y: auto显式声明滚动容器，别依赖隐式滚动
父容器设 height: 100vh 会让 sticky 半途失效
height: 100vh 是物理截断，不是视觉约束。sticky 元素的吸附逻辑被硬性限制在该高度内，哪怕页面总高 200vh，它也只在前 100vh 生效，之后自动退化为 relative。Safari 尤其敏感，常因此静默失败。
正确做法是把 height: 100vh 换成 min-height: 100vh，既保底显示，又允许内容撑开容器，让整个自然高度成为滚动上下文。
立即学习“前端免费学习笔记（深入）”；
- 绝对不要对 sticky 元素的父容器设
height: 100%（尤其嵌套在 flex/grid 中），改用min-height: 100vh - 如果父容器是
display: flex的直接子项，旧版 Safari 可能不识别其为滚动容器，加align-self: flex-start或换用普通div包裹 - 表格中想让
th在tbody滚动时吸顶，外层table必须设max-h-96 overflow-y-auto，不能靠tbody自己撑高
吸顶后内容重叠？不是 JS 计算问题，是 CSS 占位缺失
sticky 元素吸附时仍占据原始文档流位置，后续兄弟元素不会自动下移。你看到文字被盖住，是因为没预留空间——这是设计特性，不是渲染异常。
最稳妥的占位方式不是给每个后续元素加 margin-top，而是给整个内容区加 padding-top，值等于 sticky 元素的自然高度（含 border 和 padding）。
- 避免用
calc(60px + 1rem)这类混合单位，iOS Safari 对某些组合解析不稳定 - 响应式场景下高度不固定？用
padding-top: env(safe-area-inset-top)+padding-top: 60px双声明兜底 - 别对 sticky 元素本身设
z-index: -1或transform，会破坏粘性或导致层级错乱
需要“滚动到某区域才吸顶”，直接调 top 值就行
sticky 的 top 不是相对于视口顶部，而是相对于它原本在文档流中的位置。导航栏初始离顶部有 80px 间距？那就设 top: 80px，滚动时它会在距离视口顶部还有 80px 时开始吸附——不用 JS 监听，CSS 原生支持。
关键细节：这个偏移量必须和元素自身的 margin-top 一致。比如 .nav { margin-top: 24px; }，那 top 就得是 24px，否则滚动过程会出现跳变。
- 移动端 Safari 地址栏收放会导致视口高度突变，
top: 0可能瞬间错位；优先用top: env(safe-area-inset-top) - 不要混用
position: sticky和position: fixed切换，坐标系不同，浏览器不保证平滑过渡 - 多标题接力吸顶（如章节标题逐个吸附）：按 DOM 顺序设不同
top值，且共用同一父容器，该父容器不能是 flex/grid 的直接子项
overflow 但继承了 auto 的父节点，或者用了 transform 却以为只是做动画的容器。 
