положить абсолютное положение 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; 

} 

EDIT: Я поместил слайд 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; 
}