css - 使内容DIV重叠页眉和页脚

Question

我在使用 CSS 创建这种效果时遇到了一些问题：

http://i.stack.imgur.com/sMBmg.jpg

基本上，我希望我的内容 div 浮动在顶部并略微重叠页眉和页脚元素。我玩过一些绝对定位，但我不确定这是否是最好的方法。我想要一个适用于所有设备和屏幕尺寸的响应式解决方案。有什么建议么？

Answer 1

这是您可以做到的一种方法。

如果这是您的 HTML：

<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>

应用以下 CSS：

.header, .footer {
    height: 100px; /* not strictly needed... */
    border: 1px solid blue;
}
.content {
    width: 50%; /* for example... */
    height: 400px;
    background-color: yellow;
    margin: 0 auto;
    border: 1px dotted blue;
}
.header {
    margin-bottom: -25px;
}
.footer {
    margin-top: -25px;
}
.content {
    position: relative;
    z-index: 1;
}

您可以在以下位置查看演示：http: //jsfiddle.net/audetwebdesign/CNnay/

您为页眉、内容和页脚设置了三个块级元素。

将负边距应用于页眉底部和页脚顶部以创建偏移效果。

最后，应用z-indexto.content调整堆叠顺序，以便将内容块绘制在页脚块上。

在此布局中，内容块将随着您添加更多内容而垂直扩展。

结果如下所示：

Answer 2

你可以试试position:fixed或者z-index:2000你的div班级
我已经创建了这个http://jsfiddle.net/RVnU7/1/