CSS無関係なdiv内の余白の影響を受ける1つのdivの絶対位置付け

Question

次のように、ページの上部に200ピクセルの赤いボックスが続き、100ピクセルの空白が続き、次に下部に紫色のボックスが表示されます。これはDreamweverのWYSIWYGビューが私に示しているものですが、FF IE Chrはページ中央の赤いボックスです。面白いのは、私がラッパーdivにボーダーを追加すると、私が期待しているものが得られます。

何が起こっているのかは、#content divのmargin-top：300pxが#header divを押し下げていることです。 #header divは#wrapper divの中に絶対配置されているので、なぜこれが起こっているのかわかりません。

<style> 
#wrapper{ 
    width:960px; 
    margin:0 auto; 
    background-color:#fff; 
    position:relative; 
    border:0px solid green; 
    } 
#header{ 
    width:960px; 
    height:200px; 
    background-color:#f00; 
    position:absolute; 
    top:0px; 
    left:0px 
    } 
#content{ 
    width:960px; 
    background-color:#f2f; 
    margin-top:300px; 
    } 
</style> 


<div id="wrapper"> 
    <div id="header">header</div> 
    <div id="content">content<br /><br /><br /></div> 
</div> 

Answer 1

はい、あなたは正しい方向にあります。実際には、W3Cボックスモデルの動作がcollapsing marginsのため、#wrapperに300pxのマージンが適用されています（したがって、#headerも一緒にプッシュダウンされます）です。この場合

は、「ボックスとその最初のインフロー子の上マージンの上マージンは」崩壊されています #wrapperの0PXトップマージンと #contentの300ピクセルのトップマージン #wrapper （#headerは絶対位置を持つため、#contentは最初のインフロー子です）の単一の上部マージンに結合されます。国境や変更以外

この問題を解決する簡単な方法は、#headerの位置が、パディングにマージンを変更するだけです：

#content{ 
    width:960px; 
    background-color:#f2f; 
    padding-top:300px; 
} 

はhttp://www.w3.org/TR/CSS2/box.html#collapsing-margins

を参照してください。