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

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> => middle <div> overlaps upper and lower <div>