Napisy Flexslider pokazane poniżej nie na górze obrazu

Question

Widziałem to wcześniej na Stackoverflow, ale nie mogę znaleźć dokładnej odpowiedzi. Chcę tylko, żeby podpisy nakładały się na mój obraz. Zamiast tego wydają się po prostu spaść poniżej. Zakładam, że jest to prawdopodobnie kwestia pozycjonowania, ale nie można znaleźć żadnego innego zasobu, który wskaże problem. Pomyślałem, że zapytam tutaj. Dziękuję za twój czas z góry. Poniżej znajduje się CSS, HTML i JavaScript oraz jQuery. Postępowałem zgodnie z instrukcjami podanymi przez Flexslider do instalacji.

CSS

.flex-container a:active, 
.flexslider a:active, 
.flex-container a:focus, 
.flexslider a:focus {outline: none;} 
.slides, 
.flex-control-nav, 
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles 
*********************************/ 
.flexslider {margin: 0; padding: 0;} 
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ 
.flexslider .slides img {width: 100%; display: block;} 
.flex-pauseplay span {text-transform: capitalize;} 

/* Clearfix for the .slides element */ 
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;} 

/* No JavaScript Fallback */ 
/* If you are not using another script, such as Modernizr, make sure you 
* include js that eliminates this class on page load */ 
.no-js .slides > li:first-child {display: block;} 


/* FlexSlider Default Theme 
*********************************/ 
.flexslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;} 
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;} 
.loading .flex-viewport {max-height: 300px;} 
.flexslider .slides {zoom: 1;} 

.carousel li {margin-right: 5px} 


/* Direction Nav */ 
.flex-direction-nav {*height: 0;} 
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;} 
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; } 
.flex-direction-nav .flex-prev {left: -36px;} 
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;} 
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;} 
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;} 
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;} 

/* Control Nav */ 
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;} 
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} 
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);} 
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); } 
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; } 

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;} 
.flex-control-thumbs li {width: 25%; float: left; margin: 0;} 
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;} 
.flex-control-thumbs img:hover {opacity: 1;} 
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;} 

@media screen and (max-width: 860px) { 
    .flex-direction-nav .flex-prev {opacity: 1; left: 0;} 
    .flex-direction-nav .flex-next {opacity: 1; right: 0;} 
} 

JQuery i JavaScript

<link rel="stylesheet" href="css/flexslider.css" type="text/css"> 
     <script src="js/vendor/modernizr-2.6.2.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script src="jquery.flexslider.js"></script> 

     <script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
    $('.flexslider').flexslider({ 
      animation: "slide", 
      controlsContainer: ".flex-container" 
    }); 
    }); 

HTML

<div class="flex-container"> 
    <div class="flexslider"> 
    <ul class="slides"> 
     <li> 
     <img src="img/Kemper_Mark.jpg" /> 
     <p class="flex-caption">Captions and cupcakes. Winning combination.</p> 
     </li> 
     <li> 
     <img src="img/octoberfest.jpg" /> 
     <p class="flex-caption">This image is wrapped in a link!</p> 
     </li> 
     <li> 
     <img src="img/plat_club.jpg".jpg" /> 
     </li> 
    </ul> 
    </div> 
</div> 

Answer 1

Wydaje się, że u nie dodałem flex-podpis css

.flexslider .slides li { 
    position:relative; 
} 

.flex-caption { 
    position:absolute; 
    left:0; 
    right:0; 
    bottom:0; 
    background:#000; /* whatever you want */  
    z-index:1; 
    padding:5px; 
} 

spróbuj, może to zadziała ... daj mi znać, jeśli zadziała

Answer 2

Odpowiedź dipaka na powyższe informacje sprawdziła się świetnie. Kopalni zakończył się

.flex-caption { 
    position: absolute; 
    left: 50; 
    right: 50; 
    bottom: 0; 
    background: rgba(0, 0, 0,0.6); 
    z-index: 1; 
    padding: 10px; 
} 

co daje podpis czarne tło z nieprzezroczystości .6

prostu dodaje to do spodzie flexslider.css

Answer 3

Relocated pagera (kontrole NAV) w prawo po lewej: 45%

.flex-control-nav { 
    position:absolute; 
    right:0; 
    left: 45%; 
    /* bottom:7.3%; */ 
    text-align:center; 
}