Question

我是flexslider（http://www.woothemes.com/flexslider）的新手，并且难以将控件导航设置在滑块图像的顶部。我希望它位于图像的右下角。但无论我在样式上做什么，它总是默认在滑块下面。您可以在此处查看该网站：http://dakar.bournemouth.ac.uk/~hmonaghan/

欢迎任何帮助，欢呼！

HTML：

<div id="header" class="flexslider">
<ul class="slides">
<li>
    <div class="slidertext-holder">
    <div class="slidertext">
        <h1>"Donec auctor volutpat lorem, nec cursus augue congue ac. Curabitur malesuada lacinia lorem..."</h1>
        <h2>WARREN MOORE</h2>
    </div>
    </div>
    <img src="images/headerfootball.png">
</li>
<li>
    <div class="slidertext-holder">
    <div class="slidertext">
        <h1>"Duis non metus ipsum. Maecenas sit amet risus ut ligula tempus commodo a in justo."</h1>
        <h2>SOMEONE ELSE</h2>
    </div>
    </div>
  <img src="images/headerfootball.png">
</li>
<li>
    <div class="slidertext-holder">
    <div class="slidertext">
        <h1>"Luke, I am your father."</h1>
        <h2>DARTH VADER</h2>
    </div>
    </div>
  <img src="images/headerfootball.png">
</li>
</ul>
<ol class="flex-control-nav">
    <li><a class="active">1</a></li>|
    <li><a class="">2</a></li>|
    <li><a class="">3</a></li></ol>

CSS：

.ul slides {
margin-bottom:-0.5%;
}

.flex-control-nav {
color:#FFF;
margin-left:20%;
width:35%;
font-family: Proximanova Regular;
position:absolute;
}

.slidertext-holder {
margin-left: auto;
margin-right: auto;
}

.slidertext {
width:35%;
margin-left:55%;
position: absolute;
bottom: 10%;
}

抱歉，已更新以添加代码。

Answer 1

我认为您正在寻找的是：

.flex-control-nav {
  bottom: 20px;
  position: absolute;
  right: 20px;
  text-align: center;
  width: auto;
  z-index: 1000;
}

Answer 2

您需要将z-index的{{1}}设置为较大的数字，即.flex-control-nav。这样控制条将显示在滑块顶部。

有关z-index的更多信息：http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 3

如果您正在使用响应式设计，则无法使用css来定位在幻灯片下呈现的控件nav div ...在幻灯片顶部移动控件（如视图幻灯片循环选项），您必须进入flexslider设置（配置＆gt; media＆gt; flexslider），编辑选项集并转到«高级选项»选项卡。有一个名为«控件容器（高级）»的字段，您可以在其中指定容器的类或ID以接收控件！如果你没有任何div可以在你的视图的标题中手动添加一个：只需在控件容器字段中指定.flex-control ...希望我的解释清楚！

如何在flexslider上获得控制导航？

3 个答案: