Css 将绝对定位的div放入滑块图像中

我在div

#slides

中有一个滑块

<div id="slides">
          <img src="img/slide-1.jpg" />
          <img src="img/slide-2.jpg" />
          <img src="img/slide-3.jpg" />
          <img src="img/slide-4.jpg" />
    </div>

编辑： 我将幻灯片放置在如下位置：

<div id="slides">
          <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
          <div class="slide-helpext">1</div>
          <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
          <div class="slide-helpext">2</div>
          <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
          <div class="slide-helpext">3</div>
          <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
          <div class="slide-helpext">4</div>
    </div>

1.
2.
3.
4.

---

但是滑动的是数字，然后是图像，例如一个空白屏幕上有1，然后是相应的图像

将它放在它旁边，并给它一个负边距，使其与图像重叠。实际上，您不能将其他元素分层放置在图像中，但可以使它们看起来如此

<div id="images">
    <img src="image.png" />
    <div class="text">Title</div>
</div>

---

你可以这样做：

HTML:

<div id="slider">
    <div class="slide">
       <img src="img/slide-1.jpg" />
       <span class="slide-helpext">Caption goes here</span>
    </div>
    <div class="slide">
       <img src="img/slide-2.jpg" />
       <span class="slide-helpext">Caption goes here</span>
    </div>
    <div class="slide">
       <img src="img/slide-3.jpg" />
       <span class="slide-helpext">Caption goes here</span>
    </div>
</div>

.slide{
    position:relative;
}
.slide-helpext{
    position:absolute;
    top:30%;
    left:60px;
}

---

所有图像是否与#slides容器具有相同的宽度？#slides{显示：无；位置：相对；}不会显示任何内容：）完全同意@GCyrillusSame宽度和高度。滑块工作正常@Qiqi和GCabaziz.在我把图片和标题放在一个div中之后，它工作得很好。

<div id="slider">
    <div class="slide">
       <img src="img/slide-1.jpg" />
       <span class="slide-helpext">Caption goes here</span>
    </div>
    <div class="slide">
       <img src="img/slide-2.jpg" />
       <span class="slide-helpext">Caption goes here</span>
    </div>
    <div class="slide">
       <img src="img/slide-3.jpg" />
       <span class="slide-helpext">Caption goes here</span>
    </div>
</div>

.slide{
    position:relative;
}
.slide-helpext{
    position:absolute;
    top:30%;
    left:60px;
}