Javascript 文本不显示在图像CSS HTML JS上

我创建了一个“幻灯片”，每5秒循环播放三幅图像。javascript按预期工作，但与每个图像关联的文本不会显示在图像上

index.html

<div class="image-container">
  <div class="image-container__slides image-container__slides--fade">
    <div class="image-container--text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
      error voluptatem voluptas neque dolor incidunt perspiciatis facere ab
      ipsam expedita.
    </div>
    <picture class="image">
      <source
        srcset="./assets/images/couple-large-hi-dpi.jpg 5168w"
        media="(min-width: 1380px)"
      />
      <source
        srcset="./assets/images/couple-large_1920.jpg 1920w"
        media="(min-width: 990px)"
      />
      <source
        srcset="./assets/images/couple-medium_1280.jpg 1280w"
        media="(min-width: 640px)"
      />
      <img src="./assets/images/couple-small_640.jpg" alt="" />
    </picture>
  </div>

  <div class="image-container__slides image-container__slides--fade">
    <div class="image-container--text">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur
      alias placeat atque animi aut. Explicabo cum facere laudantium ratione
      rem!
    </div>
    <picture class="image">
      <source
        srcset="./assets/images/men-large-hi-dpi.jpg 5168w"
        media="(min-width: 1380px)"
      />
      <source
        srcset="./assets/images/men-large_1920.jpg 1920w"
        media="(min-width: 990px)"
      />
      <source
        srcset="./assets/images/men-medium_1280.jpg 1280w"
        media="(min-width: 640px)"
      />
      <img src="./assets/images/men-small_640.jpg" alt="" />
    </picture>
  </div>

  <div class="image-container__slides image-container__slides--fade">
    <div class="image-container--text">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil
      consequatur voluptates, cupiditate mollitia quidem quod illum cum nisi
      dolore quam?
    </div>
    <picture class="image image--last">
      <source
        srcset="./assets/images/person-large-hi-dpi.jpg 5168w"
        media="(min-width: 1380px)"
      />
      <source
        srcset="./assets/images/person-large_1920.jpg 1920w"
        media="(min-width: 990px)"
      />
      <source
        srcset="./assets/images/person-medium_1280.jpg 1280w"
        media="(min-width: 640px)"
      />
      <img src="./assets/images/person-small_640.jpg" alt="" />
    </picture>
  </div>
</div>

imagesslider.js

class ImageSlider {
  constructor() {
    this.slides = document.querySelectorAll(".image-container__slides");
    this.slideIndex = 0;
    this.showSlides();
  }

  showSlides() {
    let i;
    // Display all images as none
    for (i = 0; i < this.slides.length; i++) {
      this.slides[i].style.display = "none";
    }
    this.slideIndex++;
    // Check to see if the slideIndex is higher than number of images
    if (this.slideIndex > this.slides.length) {
      this.slideIndex = 1;
    }
    // Assign one image to be displayed
    this.slides[this.slideIndex - 1].style.display = "block";
    // Cycle through images every 5 seconds
    setTimeout(() => {
      this.showSlides();
    }, 5000);
  }
}

export default ImageSlider;

类图像滑块{
构造函数（）{
this.slides=document.queryselectoral（“.image-container\uu slides”）；
此.slideIndex=0；
这是showselides（）；
}
放映幻灯片（）{
让我；
//将所有图像显示为无
对于（i=0；ithis.slides.length）{
此.slideIndex=1；
}
//指定一个要显示的图像
this.slides[this.slideIndex-1].style.display=“block”；
//每5秒钟浏览一次图像
设置超时（（）=>{
这是showselides（）；
}, 5000);
}
}
导出默认图像滑块；

---

我要做的是在正确的图像上显示每个文本。我想如果我显示“block”，它会显示文本，但它不会。任何帮助都将不胜感激，谢谢有两件事正在进行：

您需要在

--text

元素上设置

z-index

您有

top:-50%

，它将文本从元素中上移。它应该是

顶部：50%

.image容器{
位置：相对位置；
z指数：1；
}
.图像容器>div img{
宽度：100%；
}
.image容器--文本{
位置：绝对位置；
背景色：#333；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：5；
}

我的同僚们都是精英。预防性错误是指不可预见的错误。

您需要在文本元素上设置一个

z-index

属性。耶，重要的是z-index。在你的css中试试这个：

z-index:999

对于你想要在上面的任何标记，索引应该进入

图像容器--text

类吗？是的。尝试使用

z-index:5。这不起作用。还尝试了999的z索引
class ImageSlider {
  constructor() {
    this.slides = document.querySelectorAll(".image-container__slides");
    this.slideIndex = 0;
    this.showSlides();
  }

  showSlides() {
    let i;
    // Display all images as none
    for (i = 0; i < this.slides.length; i++) {
      this.slides[i].style.display = "none";
    }
    this.slideIndex++;
    // Check to see if the slideIndex is higher than number of images
    if (this.slideIndex > this.slides.length) {
      this.slideIndex = 1;
    }
    // Assign one image to be displayed
    this.slides[this.slideIndex - 1].style.display = "block";
    // Cycle through images every 5 seconds
    setTimeout(() => {
      this.showSlides();
    }, 5000);
  }
}

export default ImageSlider;