CSS页脚定位溢出问题

Question

我遇到了我的页脚问题，我相信我错过了一些应该很明显的东西，但是我一直在玩它太久而且没有取得进展。

我的问题是内容部分在脚注下方，而不是按下。

Replicated issue

这里是重叠的两个对象。

#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; 
} 

Answer 1

如果我明白你想要做的正确，你正在试图保持页脚不重叠的“中间”元素。

看看：

margin: -40px auto 0; 

如果您更改为

margin: 40px auto 0; 

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