고정 헤더가 아래로 이동하는 이유는 무엇이며 어떻게 해결할 수 있습니까?

고정 설정 시 헤더가 아래로 이동

여기서 여백 축소라는 문제가 발생하고 있습니다. 헤더 위치를 고정하면 문서의 일반적인 흐름에서 제거되어 다음 요소(이 경우 양식)의 상단 여백이 본문의 상단 여백과 함께 축소됩니다. 이는 HTML의 기본 동작입니다.

이 문제를 방지하고 헤더와 양식 사이의 세로 간격을 유지하려면 다음 두 가지 옵션이 있습니다.

1. 사용 안 함 여백 축소:

   padding-top 추가: 1px; 여백이 무너지는 것을 방지하기 위해 CSS 본문에 추가하세요. 이 작은 양의 패딩은 접힘을 효과적으로 완화하고 양식의 여백을 적용합니다.

2. 상단 여백 설정:

   상단 추가 : [원하는 값]; 헤더의 CSS에 뷰포트 상단을 기준으로 수직 위치를 명시적으로 설정합니다. 이렇게 하면 축소된 여백이 무시되고 헤더가 원하는 위치에 유지됩니다.

업데이트된 코드(옵션 1):

body {
  padding-top: 1px; /* disable margin collapsing */
}

업데이트된 코드(옵션 2):

#header {
  top: 3rem; /* desired vertical position */
}

참고:

Bootstrap 또는 Materialise CSS와 같은 프레임워크를 사용하는 경우 이미 처리할 규칙이 있을 수 있습니다. 마진이 무너지고 있습니다. 이 경우 원하는 위치 지정을 달성하기 위해 해당 규칙을 무시하거나 대체 접근 방식을 사용해야 할 수도 있습니다.

위 내용은 고정 헤더가 아래로 이동하는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!