0

我是 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%;
}

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

4

3 回答 3

5

我认为您正在寻找的是：

.flex-control-nav {
  bottom: 20px;
  position: absolute;
  right: 20px;
  text-align: center;
  width: auto;
  z-index: 1000;
}
于 2013-10-22T13:42:46.067 回答
0

您需要将 设置z-index为.flex-control-nav一个大数字，即z-index: 1000;. 这样控制栏就会显示在滑块的顶部。

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

于 2013-10-22T13:44:08.980 回答
0

if you are working with responsive design you cannot use css to positionning the control nav div who is rendered under the slide... to move the control on top of slide (like views slideshow cycle option), you have to go in flexslider settings (configuration>media>flexslider), edit the option set and go to «Advanced options» tabs. There is a field called «Controls container (Advanced)» where you can specified the class or id of a container to receive the controls! If you dont have any div to use add one manually in the header of your view ex: and simply specify .flex-control in the control container field... Hope my explaination are clear!

于 2016-01-21T21:21:11.580 回答