Html 是否可以使用css-no JS在水平可滚动内容上定位overlay div

我有水平滚动内容的div。尝试使用css对整个内容应用覆盖。这种可滚动的内容可能会不断增长。有没有一种不用javascript代码就能实现这一点的方法

.bg{
高度：50px；
宽度：50px；
显示器：flex；
}
.集装箱{
显示器：flex；
溢出-x：自动；
宽度：300px；
调整项目：灵活启动；
位置：相对位置；
弯曲方向：行；
}
.覆盖{
位置：绝对位置；
背景色：#888888；
排名：0；
不透明度：0.8；
底部：0；
右：0；
左：0；
}

试试这个

通过而不是使用叠加效果

并将图像添加到叠加div中

<div class="container">
  <div class="overlay">
    <-- images here --->
  </div>
</div>

---

位置：粘性

可以做到：

.bg{
高度：50px；
宽度：50px；
显示器：flex；
}
.集装箱{
显示器：flex；
溢出-x：自动；
宽度：300px；
位置：相对位置；
弯曲方向：行；
}
.覆盖{
位置：粘性；
宽度：继承；
右边距：-300px；
弹性收缩：0；
左：0；
背景色：#888888；
不透明度：0.8；
}

你想这样@Pasupati Rajamanickam吗？如果有任何变化，请评论我。我也很乐意改变答案：）。我希望这是完美的工作。顺便说一句，谢谢：）。这是一个很好的方法，但我不能在叠加中添加图像，因为我试图实现的也是，我需要在最右边的模糊效果。所以通常我会在叠加中添加left:90%。

<div class="container">
  <div class="overlay">
    <-- images here --->
  </div>
</div>