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