把絕對定位div內滑塊圖像

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; 
}