javascript - 幻灯片顶部带有标题的 flexslider

Question

我使用的是 flexslider，每张幻灯片都带有标题。这行得通，除了我希望标题位于幻灯片的顶部，而不是底部。我能看到将标题放在顶部的唯一方法是绝对定位它，但是当我这样做时，标题的宽度太宽(数千像素，而不是与父元素一样宽)。

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="data/homeSlides/brennys.jpg">
      <p class="flex-caption">Brenny's Motorcycle Clinic &gt;</p>
    </li>
    <li>
      <img src="data/homeSlides/aledoFireStation.jpg">
      <p class="flex-caption">Aledo Fire Protection District &gt;</p>
    </li>
    <li>
      <img src="data/homeSlides/trueNorth.jpg">
      <p class="flex-caption">True North &gt;</p>
    </li>
    <li>
      <img src="data/homeSlides/operationThreshold.jpg">
      <p class="flex-caption">Operation Threshold &gt;</p>
    </li>
    <li>
      <img src="data/homeSlides/sadler.jpg">
      <p class="flex-caption">Sadler &gt;</p>
    </li>                       
  </ul>
</div>  

CSS:

.flex-caption {
    background:rgba(73, 92, 94, 1);
    height:50px;
    line-height:50px;
    margin:0;
    text-align:right;
    color:#ff5200;
    padding-right:20px;
    bottom:0;   
    width:98%;
}

jsFiddle

如何让标题在幻灯片顶部正确显示？

Answer 1

.flex-caption {
    background:rgba(73, 92, 94, 1);
    height:50px;
    line-height:50px;
    margin:0;
    text-align:right;
    color:#ff5200;
    padding-right:20px;
    top:0;   
    right:20%; /*Adjust this by yourself to make it look better*/
    width:98%;
    position:absolute;
}
ul.slides li{
  position:relative; /*You need this*/
}
#wrapper{
  width:80%;
}