position: sticky在flex容器中易失效，因align-items非stretch、祖先存在transform/filter/overflow等会创建新层叠上下文，或缺少z-index导致safari静默降级为relative。
直接用 position: sticky 就能实现，但必须配合 Flex 布局的容器约束和正确的祖先链，否则在 Safari 或滚动嵌套场景下大概率失效。
为什么 flex 容器里 sticky 容易失效
Flex 容器默认 align-items: stretch，这本身没问题；但一旦你显式设了 align-items: flex-start 或 center，Safari（特别是 iOS 15.4+ 和 macOS Monterey 后）会错误计算粘性临界点，导致侧边栏“动一下就停住”或完全不吸附。
- 检查父级 flex 容器是否写了
align-items—— 如果写了，删掉或改回stretch - 确保侧边栏是 flex 项目（即直接子元素），不是孙辈；否则它感知的滚动上下文可能错位
- 如果用了
flex-direction: column，sticky必须配top或bottom；用row则要配left/right，但浏览器支持度差，别这么干
top 值怎么设才不卡在 header 下面
知乎那种效果里，侧边栏上方通常有固定 header，top: 20px 这类“拍脑袋值”很容易让 sticky 元素在滚动初期就被 header 挡住，表现为“悬停在 header 底边不动”。关键不是数值本身，而是它必须 ≥ header 的实际渲染高度。
知乎数据获取 - 极简设计，支持三级认证降级（Browser Profile → File Cookie → Fallback），确保数据可靠获取 Zhihu Data Fetcher - Minimalist design with three-level auth fallback (Browser Prof...
- 用开发者工具选中 header，看
Computed → height，注意是否含border、padding或transform偏移 - 如果 header 用了
position: fixed，它的高度不参与文档流，top值得从视口顶部算起，而非父容器顶部 - 更稳妥的做法：给侧边栏加
margin-top: calc(var(--header-height, 64px))，再设top: 0，靠 margin 推开，sticky 触发逻辑更干净
Flex + sticky 组合时最常踩的三个 CSS 坑
这些属性单独看都合理，合在一起却会让 position: sticky 直接退化成 relative，且控制台不报错，极难排查。
- 父容器或任意祖先写了
transform（包括translateZ(0)、scale(1)）、filter、perspective、opacity —— 这些都会创建新层叠上下文，截断 sticky 的滚动感知链 - 侧边栏或其任意祖先设了
contain: layout或contain: paint—— 浏览器会主动限制对粘性行为的重排计算 - 父容器设了
overflow: hidden或auto—— sticky 要求“最近可滚动祖先”必须是它自己往上第一个满足条件的，而overflow: hidden不算可滚动容器
Safari 上 sticky 显示为 relative 怎么办
打开 Safari 开发者工具 → Elements → 找到侧边栏元素 → 看 Computed 面板里的 position。如果显示的是 relative 而非 sticky，基本就是被上面某条规则静默降级了。
- 先确认是否写了
z-index—— Safari 要求 sticky 元素必须有显式z-index（哪怕z-index: 1），否则可能触发渲染 bug - 检查是否有
backface-visibility: hidden应用在侧边栏或其任何祖先上，这个在 Safari 中会直接破坏 sticky 行为 - 如果用了
min-height: 100vh但内容超长，别用height: 100vh—— 后者会让 sticky 只在初始视口内生效，后续滚动失去吸附能力
真正麻烦的不是写几行 CSS，而是当它“看起来该动却不动”时，得一层层往上查祖先的 transform、contain、overflow 和 z-index —— 这些东西往往分散在不同组件的样式文件里，比 JS 报错还难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
