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-navz-index: 1000;

z-index の詳細: http://www.w3schools.com/cssref/pr_pos_z-index.asp

于 2013-10-22T13:44:08.980 に答える