在圖像旋轉木馬上添加文字

Question

我正在尋找獲得不同段落的文字，以便坐在我使用的jQuery旋轉木馬上的幻燈片上。正在使用的HTML在下面;

<div class="slider"> 
    <ul class="slides"> 
     <li class="slide"> 
      <p>example text to sit on top of carousel and change when you click 
      through carousel images</p> 
      <img src="library/images/item1.jpg" class="imgdivide"> 
     </li> 
     <li class="slide"> 
      <img src="library/images/item2.jpg" class="imgdivide"> 
     </li> 
     <li class="slide"> 
      <img src="library/images/item1.jpg" class="imgdivide"> 
     </li> 
     <li class="slide"> 
      <img src="library/images/item2.jpg" class="imgdivide"> 
     </li> 
    </ul> 
</div> 

這就是我現在的造型;

.slider { 
    position: relative; 
    width: 100%; 
    height: 50%; 
    overflow: hidden; 
} 

.slides { 
    width: 100%; 
    height: 50%; 
    overflow: hidden; 
} 

.slide p { 
    width: 100%; 
    display: block; 
    font-family: Georgia,"Times New Roman", Times, serif; 
    size:16px; 
    line-height: 20px; 
    color: #FFF; 
} 

.slide { 
    width: 100%; 
    float: left; 
} 

如果任何人都可以幫忙，這將是王牌！

Answer 1

嘗試使用具有z-index的類的文本。像這樣：

<li class="slide"> 
     <p class="text-top-image">example text to sit on top of carousel and change when you click 
     through carousel images</p> 
     <img src="library/images/item1.jpg" class="imgdivide"> 
    </li> 

而且你的CSS是這樣的：

.text-top-image{ 
    z-index: 100; 
}