고정 헤더, DIV가 뒤에 있지 않음

누군가가 도울 수있는 작은 문제가 있습니다. 나는 아마 바보 스럽지만 현재 DIV가 고정 된 머리글 아래에 앉아있는 것처럼 보이지 않습니다.고정 헤더, DIV가 뒤에 있지 않음

</body> 
    <div id="container"> 
     <div id="header"> 
     </div> 
     <div class="home"> 
      <img src="images/home.jpg" alt="" height="563" width="760"> 
     </div> 
    </div> 
</body> 

body { 
    text-align: center; 
} 

#container { 
    width: 760px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#header { 
    padding-top: 250px; 
    position: fixed; 
    background-image: url(images/logo.png); 
    background-repeat: no-repeat; 
    background-position: 50% 40%; 
} 

.home { 
}

편집 : 헤더에 기본 CSS 메뉴가 없으므로이 문제에 코드가 필요 없다고 생각합니다.

출처

2012-09-26 Giles

절대/고정 위치 지정은 문서 흐름에서 div를 제거합니다. .home을 헤더 아래에 두려면 margin-top과 헤더의 높이가 같아야합니다.

출처

2012-09-26 14:08:58 scoota269

흥미롭게도 나는 이것이 문제라고 생각했습니다. 그냥 시도해 보았고, 마진율이 높은 집은 #header도 움직였습니다. 의미가 없습니다. 하지만 패딩 - 탑은 왜 그렇지 않을까요? – Giles

파이어 폭스가 margin-top 값을 두 배로 늘릴 것이므로 margin-top을 사용하지 않는 것이 좋습니다. 대안은 마진 - 탑 대신에 패딩 - 탑 (padding-top)을 사용하고 동일한 값을 사용하는 것입니다. 또는 .home보다 큰 빈 요소를 추가하고 .home + 높이와 같은 너비를 250px 높이로 설정할 수 있습니다. 그러나 나는 가능한 경우 패딩 탑을 사용하여 unnescessary 요소의 사용을 방지하는 것을 선호합니다. – PcPulsar

필자는 padding-top을 완벽하게 사용했습니다. 감사. – Giles

고정 헤더, DIV가 뒤에 있지 않음

답변

관련 문제