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后面。我在这里创建了一个小提琴，所以你也可以看到html - http://jsfiddle.net/wmrhC/

Answer 1

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

你应该摆脱你目前设定的绝对定位，并且可能会看一些像CSS sticky footer这样的方法，让你设置一个贴在页面底部的页脚< / em>而不是浏览器窗口的底部。

Answer 2

使用position: absolute或fixed时，您应始终注意这些元素可以覆盖您网站的其他部分，并且您必须手动管理其深度

您可以使用z-index属性执行此操作。

假设您希望页脚部分显示在所有内容之下。

您可以像这样添加z-index属性：

#footer {
  /* other styles */
  z-index: -1;
}

在action

中查看

虽然注意，这只能修复“内容显示在后面”的问题。但是看着你的页面，你有更多的定位问题需要解决。

Answer 3

正如其他答案中所述，这是因为您已将页脚div定位为fixed。这一行（关于HTML和CSS）应该有助于您的页面布局： JSFiddle demo

这是CSS（完整代码见JS小提琴）：

...
.wrapper {
    position: relative;
    float: left;
    left: 5.00%;
    width: 90.00%;
    background-color: #cccccc
}
.left1 {
    position: relative;
    float: left;
    left: 0.50%;
    width: 32.00%;
    background-color: #ccccff
}
.left2 {
    position: relative;
    float: left;
    left: 1.50%;
    width: 32.00%;
    background-color: #ccccff
}
.right {
    position: relative;
    float: right;
    right: 0.50%;
    width: 32.00%;
    background-color: #ccccff
}
.footer {
    position: relative;
    float: left;
    left: 5.00%;
    width: 90.00%;
    margin: 10px 0px;
    background-color: #cfcfcf
}
...

如您所见，这些项目均未定位absolute或fixed。

请务必检查此链接，这解释了如何创建粘性页脚： CSS Sticky footer（如另一个答案所示）。

页脚显示在页脚后面

3 个答案: