Html 为什么CSS Sticky属性在经过时会擦除其他元素

我想做什么： 我试图让它在用户滚动时在页面上形成一个列表。 直到最后一个元素“擦除”所有其他元素之前，一切都按预期运行

*{
保证金：0；
填充：0；
字体系列：“Ubuntu”；
框大小：边框框；
}
身体{
背景色：#15192c；
颜色：#fff；
}
.内容{
宽度：80%；
保证金：0自动；
显示器：flex；
证明内容：之间的空间；
文本对齐：居中；
}
.名单{
边缘：10em 5em；
字体大小：200%；
}
旁白{
弹性：1；
字体大小：500%；
位置：粘性；
最高：25%；
身高：100%；
}
.h1{
字体大小：粗体；
字体大小：500%；
}
文章{
弹性：2；
身高：120%；
}
#显影剂{
位置：粘性；
顶部：4em；
}
#设计师{
位置：粘性；
顶部：6em；
}
#学生{
位置：粘性；
顶部：8em；
}
#学习者{
位置：粘性；
顶部：10em；
}
#企业家{
位置：粘性；
顶部：12em；
}
#编程器{
位置：粘性；
顶部：14em；
}
#冠军{
位置：粘性；
顶部：16em；
}
#冒险者{
位置：粘性；
顶部：18em；
}
#犯错者{
位置：粘性；
顶部：20em；
}

你好
我是一名医生

开发商
设计师
学生
学习者
企业家
程序员
冠军
冒险者
犯错者

更改要固定的位置值；就是

position: fixed;
top: 0;

这应该是可行的，

位置的东西：粘滞的

会一直粘滞“……直到遇到其包含块的相反边缘”，也就是说，一旦你滚动过它，它就会解除粘滞，这是有意义的，否则就无法访问页面下方的内容（否则，内容将与粘滞的内容重叠）。如何解决这个问题可能相当复杂，所以我不打算尝试回答，但至少现在你知道为什么了。我猜你需要一个JavaScript解决方案来真正做到这一点，一旦最后一个列表项放置到位，整个部分就会作为一个大组滚动。不过，这可能有点超出了这个问题的范围，因为到目前为止，您还没有真正尝试过这样的解决方案。