형제 헤더가 움직일 때 고정 헤더가 움직이는 이유는 무엇입니까?

고정 헤더 이동성: 수수께끼 풀기

질문:

이동 불가능하다고 가정함에도 불구하고 위치가 있는 요소는 왜 작동합니까? : 위치가 지정되지 않은 형제와 함께 고정 이동?

답변:

고정 요소는 브라우저 창에 고정되어 표시되지만 해당 위치는 뷰포트를 기준으로 계산됩니다. 문서 흐름 내의 요소를 포함합니다. 이 경우 문서 흐름의 첫 번째 요소는 헤더가 아닌 div이므로 margin-top 속성이 적용된 후에 뷰포트가 결정됩니다.

따라서 비헤더 div에 margin-top: 90px를 적용하면 뷰포트가 결정됩니다. 헤더 div:

1. 본문 요소의 기본 여백(8px)은 기본 요소의 여백 상단(90px)으로 축소됩니다.
2. 두 요소 모두 90px씩 아래로 이동합니다. 위치가 있는 헤더 요소: 고정.
3. 뷰포트는 고정 요소가 아닌 몸체 요소의 상단에서 계산되기 때문입니다.

결론:

고정 요소는 문서 흐름에서 제거되었음에도 불구하고 여전히 해당 흐름 내의 요소 위치에 영향을 받습니다. 웹페이지의 정확한 레이아웃과 위치 지정을 위해서는 이 관계를 이해하는 것이 중요합니다.

위 내용은 형제 헤더가 움직일 때 고정 헤더가 움직이는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!