时间轴节点用 position: sticky 吸顶失效，根本原因是未满足滚动容器、父级对齐、祖先洁净三条件：timeline 容器需设 max-height + overflow: auto；flex 父容器须加 align-items: flex-start；所有祖先禁用 transform/filter/contain 等属性。
时间轴节点用 position: sticky 吸顶，不是写错样式，而是结构一动就失效——尤其在 flex/grid 布局、transform 动效或 Safari 下，sticky 会直接“装死”。必须同时满足滚动容器、父级对齐、祖先洁净三条件，缺一不可。
为什么时间轴节点总“卡半截”或完全不吸顶
典型现象：节点刚滚到顶部时粘一下，再往下就跟着一起滚；或者整条时间轴纹丝不动。这不是 top: 0 没写对，而是触发了 sticky 的天然禁用链：
-
timeline容器没设height或max-height+overflow: auto，导致滚动上下文不在它身上，而是在body—— 这时sticky根本找不到“可粘的边界” - 节点父容器是
display: flex但没写align-items: flex-start，节点被默认居中，top: 0实际对应的是父容器中间位置，阈值计算偏移 - 任意祖先元素写了
transform: translateY(0)、filter: opacity(1)、contain: layout或backface-visibility: hidden—— Chrome 和 Safari 都会立刻切断sticky的滚动链
时间轴容器和节点的最小可行结构
要让每个 .timeline-item 真正吸顶，结构层级必须干净、滚动能力明确：
-
.timeline（外层容器）必须有显式高度控制：max-height: 600px; overflow: auto;，不能靠body滚动驱动 -
.timeline-item的直接父容器（比如.timeline-list）如果是display: flex，必须加align-items: flex-start；如果是display: grid，需配align-content: start -
.timeline-item自身设position: sticky; top: 0;，且不能有float、clear、vertical-align等禁用属性 - 所有祖先元素检查一遍：
transform、filter、contain、backface-visibility—— 全部删掉，一个都不能留
Safari 下 sticky 完全不生效怎么办
Safari 对 sticky 的限制比 Chrome 更严，尤其对渲染优化类属性敏感。即使结构看起来没问题，也可能静默失效：
立即学习“前端免费学习笔记（深入）”；
- 必须写双声明：
position: -webkit-sticky;放在position: sticky;前面，否则忽略 - 删掉所有
contain: layout、contain: paint、backface-visibility: hidden—— 这些在 Safari 中等于直接关闭sticky - 避免用
margin-top: auto或align-self: center控制节点垂直位置，改用padding-top或flex-start - 若仍不行，降级方案不是 JS 全量接管，而是只对 Safari 加
@supports not (position: sticky)，里面用position: fixed+getBoundingClientRect()手动同步滚动偏移
如何实现“滚动即填充”的时间轴线条效果
纯 CSS 实现时间轴线条随滚动逐步显现，关键不在单个节点，而在两层 sticky 错位配合：
- 外层
.timeline-point设position: sticky; top: 0;，并加overflow: clip（注意不是hidden，后者会禁用sticky） - 内部
.active-line用position: absolute; bottom: 0; height: 100%; width: 2px; background: #3b82f6; - 基线
.baseline用普通position: relative+z-index: 1，确保始终在底层 - 滚动时，
.timeline-point固定，.active-line从底部向上被逐步“推入”可视区，形成填充感
最容易被忽略的一点：时间轴吸顶不是“让节点停在顶部”，而是“让节点在滚动容器内按自身位置精准锚定”。一旦把滚动交给 body，或让祖先偷偷加了个 transform，整个逻辑就崩了——这时候调样式不如先查 DOM 结构。
