CSS 粘滞条重叠

Question

我正在使用 HERE 中的粘性页脚代码，由于某种原因，粘性页脚与我网站上的 .content class 重叠。

我的网站：http://tangotest.comoj.com

当您在任何给定页面上滚动到底部时，您可以看到底部的 910x50 像素图像与白框重叠。

当你滚动到底部时，我需要 910x50px 的图像位于白框的底部。

CSS 为白框.content class

.content {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin: auto;
width: 50%;
background: white;
}

CSS 对于粘性页脚 .player class

.player {
position: fixed;
left: 470px;
bottom: 0px;
height: 50px;
width: 50%;
background: transparent;
}

Answer 1

您可以尝试增加页面正文的内边距。

目前是：

body {
background-image: url('http://tangoworldwide.net/Themes/Altier_2/images/tango/city01.jpg');
padding-top: 20px;
padding-bottom: 20px;

}

尝试将 padding-bottom 更改为

padding-bottom: 30px;

Answer 2

.player {
position: relative;
left: 200px;
bottom: 20px;
height: 50px;
width: 50%;
background: transparent;
}

这是你想要的吗？如果不是这个。

.player {
position: fixed;
left: 200px;
bottom: 0px;
height: 50px;
width: 50%;
background: transparent;
}

Answer 3

您可以将 margin-bottom 设置为页脚：

任何大于 10 像素的边距都可以：

    .footer {
        padding-bottom: 10px;
        padding-left: 5px;
        padding-right: 5px;
        margin: auto;
        margin-bottom: 10px;
        width: 50%;
        background: white;
    }

要进一步增加白色 div 和固定底部 div 之间的差距，您可以将 margin-bottom 增加到更大的值。

CSS 粘滞条重叠

CSS Sticky Bar Overlapping

html

css

sticky-footer