Javascript 修复显示中的背景线性颜色：flex溢出滚动内容-CSS

我有一个可滚动的滑块，我将背景线性效果与

：：在父标记中的
之后，谁使其溢出：滚动
，但当我向左滚动时，背景颜色随内容移动。我想把它固定在正确的位置。
Lemme显示示例代码：


.courseSection--滑块{
显示器：flex；
溢出：自动；
位置：相对位置；
}
.CourseSection--滑块：：后{
内容：''；
背景图像：线性渐变（向右，95%透明，#fff 100%）；
宽度：100%；
身高：100%；
位置：绝对位置；
右：0；
排名：0；
}
.courseCard{
flex:0自动；
宽度：100px；
高度：100px；
背景色：红色；
右边距：10px；
}
您需要位置：粘在这里：


.courseSection--滑块{
显示器：flex；
溢出：自动；
位置：相对位置；
边框：1px实心；
}
.CourseSection--滑块：：后{
内容：''；
背景图像：线性渐变（向右，透明，#fff）；
宽度：5%；
左边距：自动；/*向右推*/
弹性收缩：0；
位置：粘性；
右：0；
}
.课程卡：最后一个孩子{
右边距：-5%；/*与伪元素宽度相同，以创建重叠*/
}
.courseCard{
flex:0自动；
宽度：100px；
高度：100px；
背景色：红色；
右边距：10px；
}
尝试最后一张卡的位置
固定
而不是
绝对
和
z-index


.courseSection--滑块{
显示器：flex；
溢出：自动；
位置：相对位置；
}
.CourseSection--滑块：：后{
内容：''；
背景图像：线性渐变（向右，透明0%，#fff 100%）；
宽度：40px；
高度：100px；
位置：固定；
右：0；
排名：0；
}
.courseCard{
flex:0自动；
宽度：100px；
高度：100px；
背景色：红色；
右边距：10px；
}
.课程卡：最后一个孩子{
z指数：2；
}

@ZainShabir什么样的空间？在上面的片段中它工作正常吗？很好，那是我的错误。感谢好友
位置：已修复
不是解决方案，