sticky元素需父容器有明确高度且可滚动，设置top等偏移后才能生效，否则表现如relative。
当使用 CSS 的 position: sticky 时，元素的行为依赖于其父容器的高度和滚动上下文。理解 sticky 元素与其父元素高度之间的关系，有助于避免布局异常或 sticky 失效的问题。
Sticky 元素的基本条件
sticky 定位是 relative 和 fixed 的结合体，只有在满足以下条件时才会生效：
• 父元素必须有明确的渲染高度（不能是被内容撑开后刚好无滚动）• 父元素需要产生滚动（例如设置了 overflow: auto 或 scroll，或页面本身可滚动）
• 必须设置 top、bottom、left 或 right 偏移值，否则 sticky 不会触发
最常见的用法是 top: 0，表示元素滚动到距离父容器顶部 0px 时“吸住”。
父元素高度不足的影响
如果 sticky 元素的直接父容器高度太小，没有形成可滚动区域，sticky 效果将不会触发。
立即学习“前端免费学习笔记（深入）”；
• 父元素高度小于等于视口，且内部内容未超出，就不会出现滚动条• 没有滚动，sticky 元素就没有“到达临界点”的机会，表现如同 relative
例如：
.container {
height: 200px; /* 太短，无法滚动 */
overflow-y: auto;
}
.sticky-header {
position: sticky;
top: 0;
}
如果内容总高小于 200px，.container 不滚动，.sticky-header 就不会固定。
父元素高度足够但未设置 overflow
即使父元素很高，若未设置 overflow: auto 或 scroll，也不会形成局部滚动上下文。
• 如果父元素很高但不滚动，而页面整体滚动，sticky 仍可能在页面滚动时起作用
但如果希望 sticky 在某个模块区域内固定（比如侧边栏内的标题），就必须让该模块可滚动，并控制好父元素高度。
实际建议与解决方案
为了让 sticky 正常工作，请确保：
• 给父容器设定一个合理的高度（如 min-height 或具体 height）• 设置 overflow-y: auto 或 scroll 来激活滚动
• 内容总高度超过父容器，以产生滚动条
• sticky 元素位于滚动容器内部，且偏移量（如 top）已定义
示例：
.scroll-container {
height: 400px;
overflow-y: auto;
}
.sticky-title {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
这样，.sticky-title 在父容器滚动时会停留在顶部，直到被后续内容推走。
基本上就这些。关键不是父元素多高，而是它能否形成一个可滚动的上下文。高度太小不行，没有 overflow 也不行。只要满足这两个条件，sticky 就能按预期粘住。
