Flexslider - disappearing elements on sliding - css

Question

Here is flexslider element
'
<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>
And 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;
}
It is displayed properly, but while "sliding" animation, part of spans disappears and they appear when animation is completed (when next image is on it's proper position).
What could be reason? Why only part of elements disappears?
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

Add following CSS rule and your problem will be fixed.
.slides li div {
position: relative;
}
And instead of placing individual elements with position: absolute, Its better to place only one parent with absolute positioning and all child elements with normal styling as shown below:
<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>
Having following styles:
.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>