如何使用position sticky修复作者信息栏文本叠加问题？

问题核心是当前把滚动容器设为curator__details，且curator__name的sticky定位值设置不合理，导致滚动时文本重叠。以下是无需添加背景色的解决方案：

修改思路 #

1. 将滚动容器从curator__details改为外层的curator__info，让sticky定位基于整个作者信息区域生效
2. 调整curator__name的sticky锚点位置，匹配容器内边距，避免内容偏移
3. 移除冗余的定位和flex属性，简化布局结构

修改后的代码 #

HTML（结构不变）

<div class="curator__info">
    <div class="curator__details">
        <h1 class="curator__name" v-text="curator.name" />
        <p class="curator__about" v-text="curator.about" />
    </div>
</div>

CSS

.curator__info {
    position: absolute;
    height: 100%;
    bottom: 0;
    z-index: 2;
    padding: 2rem;
    display: flex; /* 补全flex布局声明 */
    flex-direction: column;
    justify-content: flex-end;
    overflow-y: auto; /* 设置为滚动容器 */
}
.curator__details {
    flex: 0 1 80%;
    padding-top: 55%; /* 保留此值维持初始内容位置 */
}
.curator__name {
    margin-bottom: 1.5rem;
    position: sticky;
    top: 2rem; /* 与容器内边距对齐，固定在顶部区域 */
}

效果说明 #

• 页面加载时，作者名称和介绍文本仍会从下方区域开始显示
• 向上滚动时，作者名称会固定在距离容器顶部2rem的位置（匹配内边距）
• 介绍文本会在名称下方滚动，不会出现重叠覆盖的问题，完全复刻iOS端的滚动效果

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