CSS 관련없는 div의 마진에 영향을받는 한 div의 절대 위치 지정

Question

다음과 같이 페이지 맨 위에 200px 빨간색 상자가 있고 그 뒤에 100pixels의 공백이 있고 그 다음 자주색 상자가 나올 것으로 예상됩니다. 이것은 Dreamwever의 WYSIWYG보기가 나를 보여 주지만 내가 FF FF에 들어온 것입니다. 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

예, 올바른 길을 가고 있습니다. 실제로 일어나는 현상은 collapsing margins의 W3C 상자 모델 동작 때문에 # 래퍼에 300px 여백이 적용되어 (따라서 #header와 함께 누름)입니다. 이 경우

는 "상자와 최초의 흐름 아이의 위쪽 여백의 위쪽 여백은"붕괴됩니다 #wrapper의 0 픽셀 최고 마진과 #content의 300 픽셀 상단 여백 # 래퍼 (#header는 절대 위치가 있으므로 #content는 첫 번째 인플레 자식)에 대해 하나의 상단 여백으로 결합됩니다.

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

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

를 참조하십시오

테두리 외에이를 수정하거나 #header의 위치를 ​​변경하는 간단한 방법은, 패딩에 여백을 변경하는 것입니다