position: sticky 能实现侧边栏局部固定，但必须同时满足父容器可滚动、自身设 top 偏移、祖先无 transform/filter/contain 等中断行为三个硬条件，缺一即退化为 relative。

直接说结论：position: sticky 能实现侧边栏“在滚动中局部固定”，但**它不是设了就生效，必须同时满足父容器可滚动、自身有 top 偏移、祖先无中断行为这三个硬条件**。漏掉任一，它就退化成普通 position: relative，看起来完全没反应。

为什么加了 position: sticky 和 top: 20px 却不固定？

最常见原因不是 CSS 写错，而是布局链断了：

• 父容器没滚动上下文：比如 .container { height: 100%; overflow: hidden; } —— overflow: hidden 会直接禁用 sticky
• 父容器高度没显式限制：height: auto 或未设 max-height，浏览器找不到“滚动边界”
• 祖先元素用了 transform、filter 或 contain: layout：这些会创建新层叠上下文，sticky 失效
• top 值设得太大（如 top: 200px），而内容总高不足，根本触发不到粘性临界点

top 值到底该设多少？

top 不是装饰参数，它是触发粘性的物理阈值：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 若页面顶部有固定导航栏（高 64px），侧边栏应设 top: 64px，这样它会在导航栏下方开始吸附，不遮挡也不悬空
• 移动端建议用 rem 或 vh（如 top: 4rem），避免横屏或键盘弹出时视口高度突变导致错位
• 别依赖 JS 的 offsetTop 计算 —— sticky 激活后该值不再更新；要用 getBoundingClientRect() 监听真实位置

父容器怎么配才让 sticky 生效？

关键不是“让它能滚”，而是“让它成为最近的可滚动祖先”：

• 给直系父容器设 max-height: calc(100vh - 64px) + overflow-y: auto（不能是 scroll 或 hidden）
• 如果父容器是 display: flex，加 align-self: start 防止 Safari 下被拉伸变形
• 确保 html 和 body 有显式高度：html, body { height: 100%; margin: 0; }，否则子级 flex 无法撑满
• Safari ≤15.4 对 flex 容器内 sticky 支持不稳定，可加 min-height: 1px 做兜底

真正容易被忽略的是：sticky 的“固定”始终受限于父容器边界 —— 一旦侧边栏滚动出父容器范围，它立刻恢复文档流位置。这不是 bug，是设计使然。如果你需要它跨整个页面始终锚定左/右边缘，position: fixed 才是正解，但得手动处理内容遮挡（比如给主内容加 margin-left）。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！