jquery - Caption on slider behaving incorrectly -
i have issue caption adding slider when scaling page height inconsistent. isn't sitting on page in absolute position. if add position absolute vanishes?
heres code:
<div style="heigt: 500px;"> <div class="callbacks_container"> <ul class="rslides" id="slider4"> <li><img src="img/businessbig.jpg" alt=""> <p class="caption">welcome ashley tate <br /> thank finding time visit our website – whether looking purchase or considering selling business here help. <br /> experience counts in business sales , principle people @ ashley tate have each been involved in business sales , acquisitions more thirty years. <br /> our approach business sales refreshingly different; our objective deliver professional advice , guidance borne out of understanding of sales process , of market place. </p> </li> <!--<li><img src="img/cateringbig.jpg" alt=""></li> <li><img src="img/nurseriesbig.jpg" alt=""></li>--> </ul> </div> </div>
heres css:
.caption { display: block; position: absolute; z-index: 2; font-size: 20px; text-shadow: none; color: #fff; background: #000; background: rgba(255,255,255, .8); left: 0; right: 0; bottom: 0; padding: 10px 20px; margin: 0; margin-top:- 400px; float: left; }
its when scale media queries shows on smaller screens gets pushed down underneath image on larger screen sizes.
it’s hard tell without seeing rest of code happens when parent element not set position: relative
.
an absolutely positioned element must relative parent. try adding position: relative
li
Comments
Post a Comment