고정 위치 요소가 형제 요소와 함께 이동할 수 있는 이유는 무엇입니까?

고정 위치 요소가 형제 요소와 함께 이동하는 이유

위치: 고정을 사용하여 문서 흐름에서 제거되었음에도 불구하고 요소는 여전히 남아 있을 수 있습니다. 형제자매의 영향을 받습니다. 이는 뷰포트가 계산되는 방식으로 인해 발생합니다.

뷰포트는 사용자에게 표시되는 브라우저 창 내의 영역입니다. 일반적인 문서 흐름에 참여하는 요소인 in-flow 요소를 사용하여 계산됩니다.

제공된 HTML에서 첫 번째 inflow 요소는

이며 여백이 상단에 있습니다. : 90px.

요소가 고정되어 있으면 뷰포트 계산에 고려되지 않습니다.

그러나 요소는

의 여백과 함께 축소됩니다. 이로 인해 두 요소가 모두 90px 아래로 이동하여 고정 헤더의 위치에 영향을 미칩니다.

이 문제를 해결하려면 헤더 CSS에 top: 0을 추가하여 뷰포트 상단에 배치하면 됩니다. 형제 요소의 여백.

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