Question

我将页脚粘贴到页面底部，但不知何故它不会保留前一个元素的流量，现在可能位于（在Z轴上）页脚下方。页脚应该低于.center-main元素。然而，一个具有绝对属性，导致它不适合页面的中心 - 当'position：absolute'除了.cat-menu元素之外，但是页脚仍然重叠它。

有问题的CSS部分：

.cat-menu
{
    width: 20%;
    margin: 3px;
    display: inline-block;
    border:1px solid blue;

}

.center-main
{
    width: 79%;
    position: absolute;
    margin: 3px;
    display: inline-block;
    border: 1px solid red;
}

footer
{
    clear: both;
    border: 2px solid red;
    text-align: center;
    position: fixed;
    display: block;
    bottom: 0;
    width: 99.7%;
}

整页： https://jsfiddle.net/tnmmoLnq/1/（页面中心的那些按钮位于jsfiddle上 - 在我的电脑上它们没问题）。

Answer 1

您的fixed页脚将始终与容器重叠（除非它（容器）设置了height）。您需要做的是创建页脚将重叠的outer-container，以及inner-container与页脚高度相同的marin-bottom。

FIDDLE

.center-main-inner
{
    width: 79%;
    position: relative;
    margin: 3px;
    display: inline-block;
    border: 1px solid #0000FF;
    margin-bottom:20px;
}

这里是静态的 - 非固定版本：

updated fiddle

页脚重叠其上方的内容

1 个答案: