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