如何通过CSS实现标签垂直滚动时始终显示于容器可见区域顶部？

只需修改现有CSS代码，利用position: sticky属性就能让标签始终固定在容器的可见区域顶部：

.my_label {
  color: white;
  position: sticky; /* 设置粘性定位 */
  top: 0; /* 距离容器顶部0位置固定 */
  background-color: red; /* 添加背景色避免被下方内容穿透 */
}
.event{
  height: 200px;
  background-color: red;
  position: relative; /* 让粘性定位的子元素以当前容器为参照 */
  overflow-y: auto; /* 容器内容超出时开启内部滚动（可选，按需添加） */
}

实现原理 #

• position: sticky 会让元素滚动到指定位置后固定，top:0 意味着标签到达容器顶部时就会保持固定状态。
• 父容器.event设置position: relative，确保粘性定位的子元素以该容器为定位上下文，而非整个页面。
• 给标签添加背景色是为了避免滚动时下方内容透过标签显示，保证视觉上的清晰性。

如果后续.event容器内会添加更多内容导致内部溢出，overflow-y: auto会让容器自身生成滚动条，此时标签依然会固定在容器的可见顶部。

内容的提问来源于stack exchange，提问作者sfpx