position: sticky 侧边栏失效主因有三：父容器缺 height/max-height、子元素未设 top 值、祖先元素存在 overflow/transform/filter 切断滚动上下文。
position: sticky 在侧边栏上经常没反应，不是写法错了，而是根本没触发条件。它不等于“吸住”，而是在滚动上下文中卡位——这个上下文必须存在，且你得告诉浏览器“卡在哪”。
为什么 position: sticky 侧边栏总不生效
最常见原因就三个，挨个检查就行：
- 侧边栏父容器没设
height或max-height（比如只写了min-height: 100vh不够，height: 100vh或max-height: calc(100vh - 64px)才行） - 侧边栏自己漏了
top值（top: auto是默认值，不写就等于没激活 sticky） - 父容器或更上层加了
overflow: hidden、transform: translateZ(0)、filter: blur(0)—— 这些会切断滚动上下文，sticky 直接退化为relative
position: sticky 必须搭配 top 才能工作
只写 position: sticky，浏览器当它不存在。它本质是“待命状态”，必须配偏移值才激活：
-
top: 16px最常用，表示滚动到距视口顶部 16px 时开始吸附（避开浏览器 UI 或 header） - 不能同时写
top和bottom，行为未定义，部分浏览器直接忽略整个声明 - 如果是右侧固定，用
right: 0；左侧固定，用left: 0；但注意：left/right需配合父容器有明确宽度约束，否则可能错位
Flex/Grid 布局下 position: sticky 的硬性结构要求
想在 Flex 或 Grid 容器里让侧边栏 sticky，必须满足两个前提：
- sticky 元素必须是直接的 flex item 或 grid item，不能套一层额外
<div> 包裹——否则脱离布局上下文<li>它的父容器（即 <code>display: flex或display: grid元素）必须有明确高度，例如height: 100vh或max-height: calc(100vh - 64px) - 侧边栏自身需设
flex: 0 0 280px（固定宽），主内容用flex: 1，避免因弹性拉伸破坏 sticky 范围 - 用
@supports (position: sticky)包裹 sticky 样式，降级方案可 fallback 到position: fixed+ JS 滚动监听 - 移动端小屏建议用媒体查询把 sticky 改为
position: static，配合汉堡菜单控制显隐，别硬撑 - 如果侧边栏内有可滚动区域（比如长菜单），记得给内部容器设
overflow-y: auto，但外层父容器绝不能设overflow: hidden
移动端和兼容性要注意什么
position: sticky 在 Safari 旧版（iOS 13.3 之前）有抖动问题，IE 完全不支持。实操中要留后手：
真正容易被忽略的点是：sticky 的“粘住范围”完全由最近的、可滚动的、非 static 的祖先决定——它可能不是你写的那个 <aside></aside> 父元素，而是再往上两层的 <main></main> 或 <section></section>。调试时打开开发者工具，逐级关掉 overflow 和 transform，看 computed position 什么时候变成 sticky，比猜快得多。
