Html 绝对定位组件不与具有相对定位的父组件缩放

我正在用下面的UI制作一个图像caraousal。 一种底部带有半透明条的图像装饰条，调整页面大小时，该条的大小会缩放

问题是，当我将窗口调整为较小的大小时，会出现以下问题

这是密码

.main carousal{
位置：相对位置；
溢出：隐藏；
}
.slideshow容器{
/*最大宽度：1000px*/
显示器：flex；
弯曲方向：立柱；
身高：100%；
宽度：100%；
位置：相对位置；
保证金：自动；
}
/*默认情况下隐藏图像*/
迈斯利德斯先生{
显示：无；
}
/*点/子弹/指示器*/
多特先生{
光标：指针；
高度：15px；
宽度：15px；
边际：0.2px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
.active，.dot:悬停{
背景色：#717171；
}
/*褪色动画*/
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
@关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
.dot标题容器{
位置：绝对位置；
身高：4rem；
宽度：100%；
背景色：黑色；
不透明度：.56；
底部：0px；
左：0px；
右：0px；
填充：0px；
边际：0px；
}

Lorem ipsum dolor sit amet。
Lorem，ipsum。

请首先提供问题的正确答案。是否缺少一些JavaScript？“默认情况下”，您正在隐藏所有

.mySlides

，但我看不到任何会使它们再次出现在任何地方的内容。在这里输入一些可以加载到代码片段中的图像也有助于更清楚地说明问题。