Question

我的drupal网站（www.terrafirmasouth.co.uk）有一个css问题与幻灯片标题框和下面的寻呼机块有关。

当您第一次访问我的网站时，幻灯片上的透明标题框（左下角）开始低于下面的寻呼机块的高度，然后将自身调整到正确的位置。按 Ctrl - F5 也会重现问题。

如果我禁用寻呼机阻止，问题就会消失。

通过将position:absolute添加到寻呼机块，跳转停止，但我的寻呼机块下方的文本似乎与我的寻呼机块发生干扰（重叠？），我无法再点击这些数字来更改幻灯片。< / p>

我希望能够在幻灯片下显示寻呼机（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;
}

Answer 1

如果你要添加一些绝对的东西，请确保绝对属性没有任何其他内容与之相冲突，你可以使用z-index将它们排列在图层中。

这将阻止冲突，事情应该工作正常。：）

如需更多帮助，请添加一些工作代码，除了CSS或在jsfiddle上创建fiddel

css带有幻灯片和寻呼机块以及绝对定位

1 个答案: