html - div 显示在页脚后面

Question

我正在使用这个 css 代码:

/* status update page style */
#content_wrapper {
    display: inline;
    width: 80%;
    padding: 0;
    margin: 0 auto;
}
#content_update {
    display: block;
    float: left;
    padding: 20px;
    margin-top:20px;
    width: 100%;
    background-color: #eee;
    border-radius: 10px; 
    box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
#content_maintainance {
    display: block;
    float: left;
    padding: 20px;
    margin-top:20px;
    width: 100%;
    background-color: #eee;
    border-radius: 10px; 
    box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
#content_sidebar {
    display: block;
    float: right;
    width: 230px;
    padding: 20px;
    background-color: #eee;
    border-radius: 10px; 
    box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* FOOTER */
#footer {
    width:100%;
    height:580px;
    position:absolute;
    bottom:0;
    left:0;
    border-top:4px solid #ed1c24;
    background-color:#eeeeee;
}

#footer-inner {
    width:80%;
    margin:0 auto 0 auto;
    height:inherit;
}
#footerTop {
    width:100%;
    height:480px;
    padding-top:10px;
    border-bottom:2px #000000 solid;
}
#footerTopLeft {
    width:30%;
    height:420px;
    float:left;
    display:inline;
    margin-top:10px;
    padding:0 15px 10px 15px;
    border-right:1px solid #000000;
}
#footerTopMid {
    width:30%;
    height:420px;
    float:left;
    display:inline;
    margin-top:10px;
    padding:0 15px 10px 15px;
    border-right:1px solid #000000;
}
#footerTopRight {
    width:30%;
    height:420px;
    float:left;
    display:inline;
    padding:0 15px 10px 15px;
}

但是 div 显示在页脚 div 后面。我在这里创建了一个 fiddle ，这样你也可以看到 html - http://jsfiddle.net/wmrhC/

Answer 1

这是因为您将页脚 div 设置为绝对定位在浏览器窗口的底部，高度为 580px。这将 div 从常规文档流中移除，这意味着其他元素可以开始隐藏在它后面，并且由于它是 580px 高，页面上的大多数其他元素 会躲在它后面。您可以通过将页脚上的 z-index 设置为 -1 来解决此问题，但这可能不是您想要的，因为它只是意味着 div 将开始 float 在页脚的顶部而不是页脚的后面，这看起来仍然不漂亮。

你应该摆脱你目前设置的绝对定位，也许看看像CSS sticky footer这样的东西对于一种方法，它可以让您设置一个页脚，该页脚贴在页面的底部，而不是贴在浏览器窗口的底部。