Question

我在每张幻灯片上使用带有标题的flexslider。这是有效的，除了我希望标题位于幻灯片的顶部，而不是底部。我可以看到将标题置于顶部的唯一方法是绝对定位，但是当我这样做时，标题的宽度太宽（数千像素，而不是父元素的宽度）。

<?php

// This sample uses the pecl_http package. (for more information: http://pecl.php.net/package/pecl_http)
require_once 'HTTP/Request2.php';
$headers = array(
);

$query_params = array(
    // Specify values for the following required parameters
    'api-version' => '1.6',
);

$request = new Http_Request2('https://graph.windows.net/myorganization/users/{user_id}');
$request->setMethod(HTTP_Request2::METHOD_GET);
$request->setHeader($headers);

// OAuth2 is required to access this API. For more information visit:
// https://msdn.microsoft.com/en-us/office/office365/howto/common-app-authentication-tasks

$url = $request->getUrl();
$url->setQueryVariables($query_params);

try
{
    $response = $request->send();

    echo $response->getBody();
}
catch (HttpException $ex)
{
    echo $ex;
}

?>

css：

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="data/homeSlides/brennys.jpg">
      <p class="flex-caption">Brenny's Motorcycle Clinic &gt;</p>
    </li>
    <li>
      <img src="data/homeSlides/aledoFireStation.jpg">
      <p class="flex-caption">Aledo Fire Protection District &gt;</p>
    </li>
    <li>
      <img src="data/homeSlides/trueNorth.jpg">
      <p class="flex-caption">True North &gt;</p>
    </li>
    <li>
      <img src="data/homeSlides/operationThreshold.jpg">
      <p class="flex-caption">Operation Threshold &gt;</p>
    </li>
    <li>
      <img src="data/homeSlides/sadler.jpg">
      <p class="flex-caption">Sadler &gt;</p>
    </li>                       
  </ul>
</div>

jsFiddle

如何让标题在幻灯片顶部正确显示？

Answer 1

.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%;
}

Answer 2

你需要一些调整，首先你需要设置li relative，这样它就成了绝对孩子的参考框。 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 &gt;</p>
      </li>
      <li>
        <img src="http://pointbuilders.nbson.com/data/homeSlides/aledoFireStation.jpg">
        <p class="flex-caption">Aledo Fire Protection District &gt;</p>
      </li>
      <li>
        <img src="http://pointbuilders.nbson.com/data/homeSlides/trueNorth.jpg">
        <p class="flex-caption">True North &gt;</p>
      </li>
      <li>
        <img src="http://pointbuilders.nbson.com/data/homeSlides/operationThreshold.jpg">
        <p class="flex-caption">Operation Threshold &gt;</p>
      </li>
      <li>
        <img src="http://pointbuilders.nbson.com/data/homeSlides/sadler.jpg">
        <p class="flex-caption">Sadler &gt;</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>

flexslider与幻灯片顶部的标题

2 个答案: