javascript - 幻灯片的位置属性问题

Question

我试图在我的主页顶部显示一个幻灯片，它需要使用位置：相对和位置：绝对。幻灯片工作正常，但我注意到它下面的内容，例如。应该在幻灯片下方的文本和也应该在幻灯片下方的按钮出现并重叠在幻灯片上。如何正确定位幻灯片下方的元素，以免它们与不同的屏幕尺寸重叠？我对这一切都很陌生，所以我将不胜感激！谢谢！

这是我的代码：

const slideshowImages = document.querySelectorAll(".hero .mySlides");

         const nextImageDelay = 5000; 
         let currentImageCounter= 0;

         slideshowImages[currentImageCounter].style.opacity = 1;
         setInterval(nextImage, nextImageDelay);

         function nextImage(){
             //slideshowImages[currentImageCounter].style.opacity = 0;
             slideshowImages[currentImageCounter].style.zIndex = -2;
             const tempCounter = currentImageCounter;
             setTimeout(() => {
                 slideshowImages[tempCounter].style.opacity = 0;
             }, 1000);
             currentImageCounter = (currentImageCounter + 1) % slideshowImages.length;
             slideshowImages[currentImageCounter].style.opacity = 1;
             slideshowImages[currentImageCounter].style.zIndex = -1;
           }

.hero {
           width: 100%;
           height: 100%;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           position: relative;
           height: 10vh;
          }

        .mySlides {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           object-fit: cover;
           z-index: -1;
           opacity: 0;
           transition: opacity 1s ease-in-out;
          }

        .hero-text {
           width: 100%;
           display: flex;
           justify-content: center;
           align-items: center;
           position: absolute;
           height: 15vh;
           top:350px;
         }

<!-- begin snippet: js hide: false console: true babel: false -->

按钮没有位置属性。

标签： javascripthtmlcssposition