我在 div #slides
中有一个 slider 。
<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 {
显示:无;
职位:相对;
}
现在我想在显示一些文本的幻灯片图像中放置一个 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,然后滑动对应的图片!
最佳答案
你可以这样做:
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;
}
关于css - 在 slider 图像中放置一个绝对定位的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17207685/