Javascript 用幻灯片显示定位属性问题

我试图在我的主页顶部显示一个幻灯片，需要使用position:relative&position:absolute。幻灯片效果很好，但我注意到它下面的内容，例如，应该在幻灯片下面的文本和应该在幻灯片下面的按钮正在出现，并与幻灯片重叠。如何将元素正确放置在幻灯片下方，使其不会与不同的屏幕大小重叠？我对这一切都是陌生的，所以我将感谢任何帮助！谢谢大家!

这是我的密码：

const slideshowmages=document.queryselectoral（“.hero.mySlides”）；
const nextImageDelay=5000；
设currentImageCounter=0；
幻灯片图像[currentImageCounter].style.opacity=1；
设置间隔（nextImage，nextImageDelay）；
函数nextImage（）{
//幻灯片显示图像[currentImageCounter].style.opacity=0；
slideshowImages[currentImageCounter].style.zIndex=-2；
const tempCounter=currentImageCounter；
设置超时（（）=>{
幻灯片图像[tempCounter].style.opacity=0；
}, 1000);
currentImageCounter=（currentImageCounter+1）%slideshowImages.length；
幻灯片图像[currentImageCounter].style.opacity=1；
slideshowImages[currentImageCounter].style.zIndex=-1；
}

.hero{
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
高度：10vh；
}
迈斯利德斯先生{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
对象匹配：覆盖；
z指数：-1；
不透明度：0；
过渡：不透明度1s缓进缓出；
}
.英雄文本{
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：绝对位置；
高度：15vh；
顶部：350px；
}

---

看不到您的幻灯片运行。如果您添加一个示例，将非常有用。这是我的代码笔，其中包含我的代码片段。幻灯片在某些屏幕大小下看起来还可以。。。但并非全部。我肯定我做错了什么。看不到您的幻灯片运行如果您添加一个示例将非常有用。这是我的代码笔，其中包含我的代码片段。幻灯片在某些屏幕大小下看起来还可以。。。但并非全部。我肯定我做错了什么。