flexslider with caption at top of slide

Question

I am using flexslider with a caption on each slide. This works, except I want the caption to be at the top of the slide, not the bottom. The only way I can see to put the caption at the top is to position it absolutely, but when I do that, the width of the caption is too wide (thousands of pixels, instead of as wide as the parent element).

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

the 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

how do I get the caption to display properly at the top of the slide?

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

Answer 2

you need some adjustement, first you need to set li relative so it becomes the reference box for absolute childs. z-index will bring the text on top for sure:

 $(function() { $('.flexslider').flexslider({ animation: "slide" }); }); 

 .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; left: 0%;/* added */ width: 91%;;/* added */ position: absolute; z-index: 1;;/* added */ } li { position: relative;;/* added */ } #wrapper { width: 80%; } } 

 <div id="wrapper"> <div class="flexslider"> <ul class="slides"> <li> <img src="http://pointbuilders.nbson.com/data/homeSlides/brennys.jpg"> <p class="flex-caption">Brenny's Motorcycle Clinic &gt;</p> </li> <li> <img src="http://pointbuilders.nbson.com/data/homeSlides/aledoFireStation.jpg"> <p class="flex-caption">Aledo Fire Protection District &gt;</p> </li> <li> <img src="http://pointbuilders.nbson.com/data/homeSlides/trueNorth.jpg"> <p class="flex-caption">True North &gt;</p> </li> <li> <img src="http://pointbuilders.nbson.com/data/homeSlides/operationThreshold.jpg"> <p class="flex-caption">Operation Threshold &gt;</p> </li> <li> <img src="http://pointbuilders.nbson.com/data/homeSlides/sadler.jpg"> <p class="flex-caption">Sadler &gt;</p> </li> </ul> </div> </div> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>