CSS页脚定位溢出问题答案

【问题标题】：CSS footer positioning overflow issueCSS页脚定位溢出问题
【发布时间】：2011-04-09 12:21:04
【问题描述】：

我的页脚有问题，我确定我遗漏了一些应该很明显的东西，但我已经玩了太久了，但没有取得任何进展。

我的问题是内容部分位于我的页脚下方而不是向下推。

这是两个重叠的对象。

#footer {
    margin: -40px auto 0;
    z-index: 9999;
    border-bottom: none;
    width: 75em;
    height: 3.333em;
    border: .0833em solid #DEDEDE;
    -moz-border-radius-topleft:26px;
    -moz-border-radius-topright:26px;
    -webkit-border-top-left-radius:26px;
    -webkit-border-top-right-radius:26px;
    -moz-box-shadow:0px 0px 20px #000000;
    -webkit-box-shadow:0px 0px 20px #000000;
    box-shadow:0px 0px 20px #000000;
}

#middle {
    width:75em;
    z-index: -1;
    margin:0em auto;
    padding: 15px 0 1.667em 0;
    height: 95%;
    position: relative;
    background-color: rgba(255, 255, 255, .30);
    -moz-border-radius:26px;
    -webkit-border-radius:26px;
    border-radius:26px;
    -moz-box-shadow:0px 0px 20px #000000;
    -webkit-box-shadow:0px 0px 20px #000000;
    box-shadow:0px 0px 20px #000000;
}

【问题讨论】：

标签： css positioning footer

【解决方案1】：

如果我理解您要正确执行的操作，那么您是在尝试防止页脚与“中间”元素重叠。

看看：

margin: -40px auto 0;

如果你把它改成

margin: 40px auto 0;

删除减号会使您的页脚向南移动。您可以调整确切的长度，但我认为这是主要问题，并且经过测试可以将页脚向下移动。

【讨论】：

谢谢，我完全忽略了这一点。