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> に重なる