Html 可滚动div内的覆盖未正确显示

我有一个可滚动的div。在这个div中我有一个绝对定位的覆盖层。不幸的是，这个覆盖层被卡在顶部。因此，当我向下滚动时，覆盖层保持在顶部：

.list{
高度：300px；
宽度：300px；
溢出：滚动；
溢出x：隐藏；
字体大小：12px；
位置：相对位置；
边框：2倍实心；
}
跨度{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
填充：10px 12px；
高度：33像素；
背景：红色；
}
跨度：第n个子（2n）{
背景：蓝色；
}
.覆盖{
z指数：1000；
边界：无；
保证金：0；
填充：0；
宽度：100%；
身高：100%；
排名：0；
左：0；
背景：rgb（255、255、255）；
不透明度：0.8；
游标：默认值；
位置：绝对位置；
}

不是最优雅的，但你可以使用
位置：sticky


.list{
高度：300px；
宽度：300px；
溢出：滚动；
溢出x：隐藏；
字体大小：12px；
位置：相对位置；
边框：2倍实心；
}
跨度{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
填充：10px 12px；
高度：33像素；
背景：红色；
}
跨度：第n个子（2n）{
背景：蓝色；
}
.覆盖{
z指数：1000；
边界：无；
保证金：0；
填充：0；
宽度：100%；
身高：100%；
排名：0；
左：0；
背景：rgb（255、255、255）；
不透明度：0.8；
游标：默认值；
位置：粘性；
}
.内容{
最高利润率：-100%
}

不是最优雅的，但你可以使用
位置：sticky


.list{
高度：300px；
宽度：300px；
溢出：滚动；
溢出x：隐藏；
字体大小：12px；
位置：相对位置；
边框：2倍实心；
}
跨度{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
填充：10px 12px；
高度：33像素；
背景：红色；
}
跨度：第n个子（2n）{
背景：蓝色；
}
.覆盖{
z指数：1000；
边界：无；
保证金：0；
填充：0；
宽度：100%；
身高：100%；
排名：0；
左：0；
背景：rgb（255、255、255）；
不透明度：0.8；
游标：默认值；
位置：粘性；
}
.内容{
最高利润率：-100%
}

位置：固定相对于视口（浏览器窗口）而不是元素。如果他使用它，整个屏幕将被覆盖…错过了部分-答案更新。谢谢你的回答。也许一个解决方案是在单击按钮时在div内的顶部滚动，以便覆盖将在视口中？
position:fixed相对于视口（浏览器窗口）而不是元素。如果他使用它，整个屏幕将被覆盖…错过了部分-答案更新。谢谢你的回答。也许一个解决方案是在div on按钮单击时在顶部滚动，以便覆盖在视口中？我的解决方案与复制的不同。遗憾的是，我无法与您分享，因为Temani Afif将我的问题标记为重复。但我现在正在努力滚动到可滚动div的顶部，以使覆盖图返回到视图中。我的解决方案与复制的不同。遗憾的是，我无法与您分享，因为Temani Afif将我的问题标记为重复。但我现在正在努力滚动到可滚动div的顶部，以使覆盖图返回到视图中。