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

Answer 2

Вам нужна некоторая регулировка, сначала вам нужно установить li relative, чтобы он стал справочным полем для абсолютных детей. г-индекс будет привести текст сверху точно:

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