Zインデックスがまだカバーされていません

Question

私のメインコンテンツウィンドウの上に私のフッターが表示されています。

メインコンテンツがヘッダーを100pxオーバラップするように余白を移動しようとすると、フッターが100pxオーバラップしてウィンドウの最下部にレンダリングされます。

「:: before」と何が間違っているのか分かりませんが、そうするには別の方法がありますか？

おかげ

#wrapper:before { 
 
    content: ''; 
 
    float: left; 
 
    height: 100%; 
 
} 
 

 
#wrapper { 
 
    height: 100%; 
 
    background-color: black; 
 
} 
 

 
#header { 
 
    z-index: 1; 
 
    height: 250px; 
 
    text-align: center; 
 
    background: url(../images/bg02.jpg); 
 
    border-bottom: 10px solid #01A9DC; 
 
} 
 

 
#main { 
 
    z-index: 2; 
 
    margin: -100px auto -50px auto; 
 
    width: 80%; 
 
    background-color: white; 
 
    min-height: 400px; 
 
} 
 

 
#footer { 
 
    z-index: 1; 
 
    border-top: 10px solid #01A9DC; 
 
    background: url(../images/bg02.jpg); 
 
} 
 

 
#footer:after { 
 
    z-index: 1; 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
}

<div id="wrapper"> 
 

 
    <div id="header"> HEADER<br> </div> 
 

 
    <div id="main"> MAIN CONTENT </div> 
 

 
    <div id="footer"></div> 
 

 
</div>

Answer 1

のz-indexが少しトリックをたくさん持っています。私は大まかには、配置された（relativeまたはabsolute）要素または要素がopacityのような特定の状況でのみ適用されると思います。 要素にposition: relativeを追加して、ここであなたのサンプルを作成しました。

#wrapper:before { 
 
    content: ''; 
 
    float: left; 
 
    height: 100%; 
 
} 
 

 
#wrapper { 
 
    height: 100%; 
 
    background-color: black; 
 
} 
 

 
#header { 
 
    z-index: 1; 
 
    height: 250px; 
 
    text-align: center; 
 
    background: url(../images/bg02.jpg); 
 
    border-bottom: 10px solid #01A9DC; 
 
} 
 

 
#main { 
 
    z-index: 2; 
 
    position: relative; 
 
    margin: -100px auto -50px auto; 
 
    width: 80%; 
 
    background-color: white; 
 
    min-height: 400px; 
 
} 
 

 
#footer { 
 
    z-index: 1; 
 
    border-top: 10px solid #01A9DC; 
 
    background: url(../images/bg02.jpg); 
 
} 
 

 
#footer:after { 
 
    z-index: 1; 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
}

<div id="wrapper"> 
 

 
    <div id="header"> HEADER<br> </div> 
 

 
    <div id="main"> MAIN CONTENT </div> 
 

 
    <div id="footer"></div> 
 

 
</div>

Answer 2

Z-指数は奇数です。 CSSプロパティーpositionは、z-indexの動作に大きな役割を果たします。

position: relative;に#mainを追加すると、目的の効果が表示されます。

私はさまざまな位置とz-インデックス（これらの要素を入れ子にするだけでなく）で遊んでいるといいでしょう。あなたはすぐに奇妙なことが分かります。