我正在使用每张幻灯片上带有标题的flexslider。这有效,除了我希望标题位于幻灯片的顶部,而不是底部。我可以看到将标题放在顶部的唯一方法是绝对定位它,但是当我这样做时,标题的宽度太宽(数千像素,而不是父元素的宽度)。
<div class="flexslider">
<ul class="slides">
<li>
<img src="data/homeSlides/brennys.jpg">
<p class="flex-caption">Brenny's Motorcycle Clinic ></p>
</li>
<li>
<img src="data/homeSlides/aledoFireStation.jpg">
<p class="flex-caption">Aledo Fire Protection District ></p>
</li>
<li>
<img src="data/homeSlides/trueNorth.jpg">
<p class="flex-caption">True North ></p>
</li>
<li>
<img src="data/homeSlides/operationThreshold.jpg">
<p class="flex-caption">Operation Threshold ></p>
</li>
<li>
<img src="data/homeSlides/sadler.jpg">
<p class="flex-caption">Sadler ></p>
</li>
</ul>
</div>
CSS:
.flex-caption {
background:rgba(73, 92, 94, 1);
height:50px;
line-height:50px;
margin:0;
text-align:right;
color:#ff5200;
padding-right:20px;
bottom:0;
width:98%;
}
js小提琴
如何使标题正确显示在幻灯片顶部?
.flex-caption {
background:rgba(73, 92, 94, 1);
height:50px;
line-height:50px;
margin:0;
text-align:right;
color:#ff5200;
padding-right:20px;
top:0;
right:20%; /*Adjust this by yourself to make it look better*/
width:98%;
position:absolute;
}
ul.slides li{
position:relative; /*You need this*/
}
#wrapper{
width:80%;
}
你需要一些调整,首先你需要设置li相对,这样它就成为绝对子项的参考框。 Z-index肯定会将文本放在顶部:
$(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
.flex-caption {
background: rgba(73, 92, 94, 1);
height: 50px;
line-height: 50px;
margin: 0;
text-align: right;
color: #ff5200;
padding-right: 20px;
top: 0;
left: 0%;/* added */
width: 91%;;/* added */
position: absolute;
z-index: 1;;/* added */
}
li {
position: relative;;/* added */
}
#wrapper {
width: 80%;
}
}
<div id="wrapper">
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/brennys.jpg">
<p class="flex-caption">Brenny's Motorcycle Clinic ></p>
</li>
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/aledoFireStation.jpg">
<p class="flex-caption">Aledo Fire Protection District ></p>
</li>
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/trueNorth.jpg">
<p class="flex-caption">True North ></p>
</li>
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/operationThreshold.jpg">
<p class="flex-caption">Operation Threshold ></p>
</li>
<li>
<img src="http://pointbuilders.nbson.com/data/homeSlides/sadler.jpg">
<p class="flex-caption">Sadler ></p>
</li>
</ul>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>