Html 如何突破位置：项目列表中的粘性？

我有一份物品清单。只要底部的项目向上滚动到其余的项目，并且所有项目都具有相同的间距，我希望在滚动时所有项目都能一起向上移动

现在，它们在向上移动之前彼此堆叠在一起

下面是codepen的一个示例：

.block{
高度：1500px；
}
.名单{
边缘顶部：400px；
}
李{
填充：65px；
字体大小：20px；
}
#一个{
位置：粘性；
顶部：20vh；
}
#两个{
位置：粘性；
顶部：30vh；
}

向下滚动

一个
两个
三个

您可以使用一些负边距来近似此值：

.block{
高度：800vh；
}
.名单{
边际上限：100vh；
}
李{
填充：65px；
字体大小：20px；
位置：粘性；
}
#一个{
顶部：10vh；
}
#两个{
顶部：20vh；
边距底部：-150px；/*150px是li高度的近似值*/
}
#三{
顶部：30vh；
页边距顶部：150px；/*上面一个的否定*/
页边距底部：-300px；/*此处大小的两倍*/
}

向下滚动

一个
两个
三个

谢谢。当我使用

marginbottom:-50px时，它正是我想要它做的在
#两个
和
页边距顶部：50px；边缘底部：-100px在
#三个
中。