FlexSlider 2: титры над изображением смещают навигационные элементы управления

Question

Пытается настроить FlexSlider так же, как показано на домашней странице сайта FlexSlider. =)

http://www.woothemes.com/flexslider/

Который имеет подписи над изображением, используя прозрачный фон.

Приведенный ниже код работает, за исключением навигационных элементов управления - они полностью сдвинуты вниз.

http://jsfiddle.net/aMDLP/1/

CSS:

#homepage-images img { 
    display: block; 
    height: 350px; 
} 

#homepage-images li { 
    position: relative; 
} 

#homepage-images .flex-caption { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    margin: 0; 
    padding: 10px; 
    color: white; 
    background-color: rgba(0,0,0,0.5); 
} 

HTML:

<div id='homepage'> 
    <div id='homepage-images' class='flexslider'> 
    <ul class='slides'> 
     <li><img src='content/homepage/images/1.jpg' alt=''><p class='flex-caption'>Some captions</p></li> 
     <li><img src='content/homepage/images/2.jpg' alt=''><p class='flex-caption'>Some more captions</p></li> 
    </ul> 
    </div> 
</div> 

JS:

$(document).ready(function() { 
    $('#homepage-images').flexslider({ 
     animation: 'slide', 
     slideshowSpeed: 3000, 
     controlsContainer: ".flex-container", 
    }); 
}); 

Answer 1

вы установили все элементы LI в position: relative. Используйте более конкретные селекторы:

http://jsfiddle.net/isherwood/aMDLP/2/

#homepage-images .slides li { 
    position: relative; 
}