2

我正在使用这个 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/

4

3 回答 3

1

这是因为您已将页脚设置div为绝对位于浏览器窗口底部，高度为580px. 这div脱离了常规文档流，这意味着其他元素可以开始隐藏在它后面，并且由于它580px很高，页面上的大多数其他元素都会隐藏在它后面。您可以通过将页z-index脚上的t 看起来很漂亮。-1div

您应该摆脱当前设置的绝对定位，也许可以查看CSS 粘性页脚之类的方法，该方法可以让您设置一个页脚，该页脚粘在页面底部而不是浏览器窗口的底部.

于 2013-05-10T08:28:22.317 回答
0

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

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

假设您希望页脚部分出现在所有内容下方。

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

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

看到它在行动

尽管请注意，这仅解决了“内容显示在后面”的问题。但是看看你的页面，你有更多的定位问题需要解决。

于 2013-05-10T08:27:50.027 回答
0

如其他答案所述，这是因为您已将页脚 div 定位为fixed. 沿着这条线的东西（关于 HTML 和 CSS）应该有助于您的页面布局： JSFiddle 演示

这是 CSS（完整代码参见 JS Fiddle）：

...
.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（如另一个答案所示）。

于 2013-05-10T08:36:32.030 回答