css - Flexslider - 滑动时消失的元素

Question

这是flexslider元素 '

<img alt="Zdjęcie" src="Image" />
<div>
    <span class="promoted-d-caption">Year</span>
    <span class="promoted-d-price" align="center">Price</span>
    <span class="promoted-d-title">Title</span>
    <span class="promoted-d-day-offer">Offer</span>
</div>

和CSS:

.promoted-d-title {
    position: absolute;
    bottom: 40px;
    padding: 10px;
    width: 100%;
    font-size: 1.7em;
}

.promoted-d-caption {
    position: absolute;
    bottom: 0px;
    padding: 10px;
    width: 100%;
}

.promoted-d-price {
    position: absolute;
    bottom: 0px;
    margin-left: 400px;
    width: 150px;
    padding: 5px;
    padding-top: 3px;
    font-size: 1.5em;
}
.promoted-d-day-offer {
    position: absolute;
    bottom: 90px;
    margin-left: 430px;
    width: 120px;
    padding: 5px;
    font-size: 1.5em;
    z-index: 1001;
}

它显示正确，但在“滑动”动画时，部分跨度消失，并在动画完成时出现(当下一个图像位于正确位置时)。

可能是什么原因？为什么只有部分元素消失？

var slider = $('#test').flexslider({
  animation: "slide"
});

.promoted-d-title {
    position: absolute;
    bottom: 40px;
    padding: 10px;
    width: 100%;
    font-size: 1.7em;
     background: #fffff0;
}

.promoted-d-caption {
    position: absolute;
    bottom: 0px;
    padding: 10px;
    width: 100%;
          background: #fffff0;
}

.promoted-d-price {
    position: absolute;
    bottom: 0px;
    margin-left: 400px;
    width: 150px;
    padding: 5px;
    padding-top: 3px;
    font-size: 1.5em;
          background: #fffff0;
}
.promoted-d-day-offer {
    position: absolute;
    bottom: 90px;
    margin-left: 430px;
    width: 120px;
    padding: 5px;
    font-size: 1.5em;
    z-index: 1001;
          background: #fffff0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js"></script>


<div class="col-md-12 main-promoted-area">
    <table style="width: 100%">
        <tr>
            <td></td>
            <td rowspan="2" style="width: 550px">
                <div id="test" class="flexslider d-promoted">
                    <ul class="slides">
                        <li>
                            <div class="">
                                <img alt="Zdjęcie" src="http://vignette3.wikia.nocookie.net/thecornerclub/images/e/e1/Blast_500x500-1-.jpg/revision/latest?cb=20150213022400" />
                                <div>
                                    <span class="promoted-d-caption">Year</span>
                                    <span class="promoted-d-price" align="center">Price</span>
                                    <span class="promoted-d-title">Title</span>
                                    <span class="promoted-d-day-offer">Offer</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="">
                                <img alt="Zdjęcie" src="http://vignette3.wikia.nocookie.net/thecornerclub/images/e/e1/Blast_500x500-1-.jpg/revision/latest?cb=20150213022400" />
                                <div>
                                    <span class="promoted-d-caption">Year</span>
                                    <span class="promoted-d-price" align="center">Price</span>
                                    <span class="promoted-d-title">Title</span>
                                    <span class="promoted-d-day-offer">Offer</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </td>
            <td></td>
        </tr>
    </table>
</div>

Answer 1

添加以下 CSS 规则，您的问题将得到解决。

.slides li div {
    position: relative;
}

与其使用 position:absolute 放置单个元素，最好只放置一个具有绝对定位的父元素，而所有子元素都具有正常样式，如下所示:

<div class="caption-area">
     <span class="promoted-d-title">Title</span>
     <span class="promoted-d-caption">Year</span>
     <span class="promoted-d-price">Price</span>
     <span class="promoted-d-day-offer">Offer</span>
 </div>

具有以下样式:

.slides li div.caption-area {
    position: absolute;
    z-index: 10;
    bottom: 0;
    right: 0;
    left: 0;
}

var slider = $('#test').flexslider({
  animation: "slide"
});

.slides li div {
    position: relative;
}
.slides li div.caption-area {
    position: absolute;
    z-index: 10;
    bottom: 0;
    right: 0;
    left: 0;
}

.promoted-d-title {
    display: block;
    margin-bottom: 2px;
    padding: 10px;
    font-size: 1.7em;
    background: #fffff0;
}

.promoted-d-caption {
    display: block;
    padding: 10px;
    background: #fffff0;
}

.promoted-d-price {
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 150px;
    padding: 5px;
    padding-top: 3px;
    font-size: 1.5em;
    background: #fffff0;
}
.promoted-d-day-offer {
    margin-left: auto;
    display: block;
    width: 120px;
    padding: 5px;
    font-size: 1.5em;
    background: #fffff0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js"></script>


<div class="col-md-12 main-promoted-area">
    <div id="test" class="flexslider d-promoted">
        <ul class="slides">
            <li>
                <div>
                    <img alt="Zdjęcie" src="http://vignette3.wikia.nocookie.net/thecornerclub/images/e/e1/Blast_500x500-1-.jpg/revision/latest?cb=20150213022400" />
                    <div class="caption-area">
                        <span class="promoted-d-day-offer">Offer</span>
                        <span class="promoted-d-title">Title</span>
                        <span class="promoted-d-caption">Year</span>
                        <span class="promoted-d-price">Price</span>
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <img alt="Zdjęcie" src="http://vignette3.wikia.nocookie.net/thecornerclub/images/e/e1/Blast_500x500-1-.jpg/revision/latest?cb=20150213022400" />
                     <div class="caption-area">
                         <span class="promoted-d-day-offer">Offer</span>
                         <span class="promoted-d-title">Title</span>
                         <span class="promoted-d-caption">Year</span>
                         <span class="promoted-d-price">Price</span>
                     </div>
                 </div>
             </li>
         </ul>
     </div>
</div>