使内容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-index应用于.content以调整堆叠顺序，以便进行调整 内容块被绘制在页脚块上。

在此布局中，当您添加更多内容时，内容块将垂直展开。

结果如下：

Answer 2

您可以尝试position:fixed课程的z-index:2000或div
我创建了这个http://jsfiddle.net/RVnU7/1/