我的 drupal 网站 (www.terrafirmasouth.co.uk) 有一个 css 问题，与幻灯片标题框和下方的寻呼机块有关。
当您第一次访问我的网站时，幻灯片上的透明标题框（左下角）从下面的寻呼机块的高度开始降低，然后自行调整到正确的位置。按下Ctrl-F5也会重现问题。
如果我禁用寻呼机块，问题就会消失。
通过添加position:absolute到寻呼机块跳跃停止，但我的寻呼机块下方的文本似乎干扰（重叠？）与我的寻呼机块，我不能再点击数字来改变幻灯片。
我希望能够在幻灯片下显示寻呼机（1-6），以便可以单击它们（我已经对此进行了测试，没有position:absolute，它工作正常，但我当然有跳跃问题）。
我在下面附上了我最新的 css，但这还没有在我的网站上发布，只是使用 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;
}