Question

我在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>

#slides { display: none; position:relative; }

现在我想在显示一些文本的幻灯片图片中放置一个div .slide-helpext，我该如何放置div？

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

}

编辑：我把幻灯片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的空白屏幕，然后是相应的图像！

Answer 1

你可以这样做：

<强> 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>

<强> CSS：

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

Answer 2

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

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

CSS：

.text {
    margin-top: -30px;
    height:30px;
}

在滑块图像中放置一个绝对定位的div

2 个答案: