css with slideshow and pager block and absolute positioning - css

Question

I have a css problem with my drupal site (www.terrafirmasouth.co.uk) to do with the slideshow caption box and the pager block underneath.
When you access my site for the first time, the transparent caption box (bottom left) on the slideshow starts lower by the height of the pager block below then adjusts itself to the correct position. Pressing Ctrl-F5 also recreates the problem.
If I disable the pager block the problem goes away.
By adding position:absolute to the pager block the jumping stops, but the text below my pager block seems to interfere (overlap?) with my pager block, and I cant click on the numbers anymore to change slide .
I want to be able to show the pagers (1-6) under the slide, so that they can be clicked (I have already tested this with no position:absolute and it works fine, but I have the jumping problem of course).
I have attached my latest css below, but this has not gone live onto my site yet, just running it on my pc using xammp.
/* my caption box */
.trcaption {
position: absolute;
left: 20px;
bottom: 10px;
background: #353535;
opacity: 0.85;
filter:alpha(opacity=85);
color: #FFFFFF;
padding: 10px 10px 10px 10px;
}
/* title inside caption box */
#trtitle {
font-weight: normal;
font-size: 18px;
padding-bottom: 5px;
color: #FFFFFF;
font-family: 'LatoLight', Arial, sans-serif;
}
/* read more link inside caption box */
#trlink a {
color: #008C07;
float: left;
font-size : 12px;
}
/* pager block under my slideshow */
.views-slideshow-controls-bottom {
display: block;
position: absolute;
text-align:center;
width: 100%;
}
/* pager item i.e. number number */
.views-slideshow-pager-field-item {
display: inline-block;
margin-right: 20px;
padding-left: 10px;
padding-right: 10px;
margin-top: 5px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
/* show active pager with grey background */
.views-slideshow-pager-field-item.active {
background: #E8E8E8;
}

Answer 1

If you are adding something absolute, make sure nothing else with property absolute is clashing with same, you can use z-index to arrange them in layer.
that will stop the clashing and things should work fine then. :)
For more help please add some working code, apart from CSS or create fiddel on jsfiddle