고정 헤더가 위치가 지정되지 않은 형제와 함께 이동하는 이유는 무엇입니까?

고정 요소 동작 이해: 고정 헤더가 위치 지정되지 않은 형제와 함께 이동하는 이유

CSS의 고정 위치 지정은 고정 헤더에 요소를 배치합니다. 뷰포트를 기준으로 한 위치입니다. 그러나 뷰포트는 일반적인 문서 흐름 내의 요소를 기반으로 계산된다는 점을 이해하는 것이 중요합니다.

제공된 HTML에서 헤더 요소는 고정되고 기본 요소에는 여백 상단이 적용됩니다. 이러한 요소가 문서에 배치되면 다음이 발생합니다.

1. 고정 헤더: 위치가 고정된 헤더 요소는 문서 흐름에서 제거되어 다음 위치에 배치됩니다.
2. 문서 흐름 계산: 기본 요소부터 시작하여 나머지 요소가 문서 흐름을 설정합니다. 기본 요소에 적용된 margin-top: 90px는 헤더와 기본 콘텐츠 사이의 세로 간격을 나타냅니다.
3. 뷰포트 계산: 뷰포트는 문서 흐름의 요소를 기반으로 계산됩니다. . 첫 번째 유입 요소는 여백 상단이 90px인 메인 요소이므로 뷰포트는 이 지점에서 시작됩니다.
4. 마진 축소: 메인 요소의 부모인 body 요소는 기본 여백은 8px입니다. CSS 여백 축소로 인해 기본 여백 상단(90px)이 본문 여백 상단(8px)과 함께 축소되어 결합된 여백이 98px가 됩니다.

결과적으로 둘 다 헤더가 뷰포트에 고정되어 있어도 기본 요소와 헤더가 98px 아래로 이동합니다. 이는 뷰포트 자체가 문서 흐름 내의 축소된 여백에 따라 조정되기 때문입니다.

따라서 고정 요소는 뷰포트를 기준으로 배치되지만 뷰포트의 위치는 내부 요소에 의해 결정된다는 점을 고려하는 것이 중요합니다. 일반적인 문서 흐름. 이러한 이해는 고정 헤더가 위치가 지정되지 않은 형제 요소와 함께 이동할 수 있는 이유를 설명합니다.

위 내용은 고정 헤더가 위치가 지정되지 않은 형제와 함께 이동하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!