html - 如何将内容定位在页眉和页脚上方

Question

我想要达到的定位：

现在我有以下内容：

属性如下：

.header, .footer {
    background: #666;
    height: 100px;
}

.content {
    background: #ccc;
    margin: -25px auto;
    min-height: 500px;
    width: 960px;
}

所以内容位于页脚下方的问题，我不知道如何解决它。z-index 不起作用。

我的 HTML：

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

Answer 1

试试这个

.header, .footer {
    background: #666;
    height: 100px;
    position: relative;
    z-index: 1;
}

.content {
    background: #ccc;
    margin: -25px auto;
    min-height: 500px;
    width: 960px;
    position: relative;
    z-index: 100;
}

Answer 2

这个例子是类似的。

3 <div> => 中间<div> 重叠上下<div>