position: sticky 不动，是因为其依赖父容器形成滚动上下文：若祖先元素设置了 overflow: hidden/auto/scroll、height: 100vh、transform/filter，或未设 top/bottom 等偏移值，sticky 会退化为 static；需确保最近滚动容器可滚动且无截断属性。
粘性定位（position: sticky）能实现列表吸顶，但必须满足父容器有明确高度/滚动上下文，否则不生效。
为什么 position: sticky 不动？常见失效原因
粘性定位不是“固定在视口”，而是“相对父容器滚动时吸附”。失效往往因为父级没形成滚动流或未设约束：
- 父容器没有设置
height或max-height，且未触发溢出滚动（overflow-y: auto或scroll） - 粘性元素的祖先中存在
transform、filter、will-change等创建新层叠上下文的属性，会截断粘性行为 - 设置了
top但父容器高度不够，元素根本没机会“滚入”粘性区域 - 在 Flex/Grid 容器中直接对子项设
sticky，某些浏览器（如旧版 Safari）支持不稳定
列表吸顶的最小可行 HTML/CSS 结构
关键：滚动容器显式设高 + 溢出 + 粘性标题需有 top 值
<div class="list-container"> <div class="header">标题行</div> <div class="item">内容1</div> <div class="item">内容2</div> </div>
CSS：
.list-container {
height: 300px;
overflow-y: auto;
}
.header {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
注意：z-index 非必需，但若列表项有背景色，不加可能被遮盖。
sticky 和 fixed 的行为差异与选型判断
sticky 是滚动感知型定位，fixed 是视口绝对定位——选错会导致布局错乱：
- 用
sticky：标题只在父容器内滚动时吸附，离开父容器范围就恢复文档流；适合局部列表（如弹窗内表格） - 用
fixed：标题永远钉在视口顶部，不管父容器在哪；但会脱离文档流，需手动预留占位或计算偏移 - 混合使用场景：页面整体滚动时用
fixed，嵌套滚动区域（如侧边栏内列表）必须用sticky，否则会随主页面一起飞走 - Safari 对
sticky的bottom支持较弱，吸底慎用；top兼容性好得多
React/Vue 中动态列表吸顶的注意事项
框架渲染不影响 CSS 规则，但容易因结构变化破坏粘性前提：
- 不要把
position: sticky写在动态生成的<tr> 或 <code><li>上，而应写在包裹表头的<th> 或独立 <code><div> 上 <li>使用虚拟滚动（如 <code>react-window）时，滚动容器是虚拟层，必须确保该层有overflow和尺寸，且粘性元素在其内部直系子元素中 - Vue 中用
v-for渲染列表时，避免把sticky样式绑定到条件渲染节点（如v-if），可能导致首次渲染不触发粘性计算 - 服务端渲染（SSR）下，初始无滚动高度，
sticky不生效是正常现象，依赖客户端 hydration 后的 DOM 尺寸
真正卡住人的地方从来不是语法，而是那个没设 overflow-y 的父容器，或者误以为 sticky 能跨多层滚动上下文起作用。
