帶有標題的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

你需要一些調整，首先你需要設置李相對，因此它成爲絕對孩子的參考框。 Z-指數將給頂部的文本肯定的：

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