javascript - 当下载栏出现在底部时，页面上的幻灯片放映内容会跳起来

每当下载栏出现在底部时，主页上的幻灯片内容就会跳起来。一旦我关闭下载栏，它就会回到正常位置。https://photos.app.goo.gl/F482eMfkXyfEZkdA9。
我想这和CSS有关。希望有人能帮忙。很抱歉，如果有类似的问题被问到之前，但我找，找不到任何东西，我是相当新的领域。
这里是CSS代码：

#slideshow > div {
    width: 970px;
    height: 500px;
    display: block;
    float: left;
    position: absolute;
    bottom: -5px;
    right: auto;
    background-repeat: no-repeat;
    margin-left: 20px;
    line-height: 180px;
}

JavaScript代码：

$("#slideshow > div:gt(0)").hide();
    setInterval(function() {
        $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
}, 5000);

最佳答案

不要将元素与bottom: -5px;对齐，而是使用top对齐来避免这种行为。

 #slideshow > div
    {
    width: 970px;
    height: 500px;
    display: block;
    float: left;
    position: absolute;
    top: 150px; /*  <-  change this   */
    right: auto;
    background-repeat: no-repeat;
    margin-left: 20px;
    line-height: 180px;
    }