정의된 요소 높이에서 '위치: 고정'이 작동하지 않는 이유는 무엇입니까?

'높이'가 정의된 경우 '위치: 끈적임'이 작동하지 않음

고정 위치 이해

고정 위치 지정, CSS에 의해 정의되며 흐름 루트(일반적으로 브라우저 뷰포트 또는 스크롤 가능한 컨테이너) 내에서 작동하며 요소가 고정된 상태로 유지되도록 합니다. 특정 조건이 충족될 때까지 주변 환경에 비해 요소가 지정된 임계값(예: 뷰포트의 상단 오프셋)에 도달하면 포함 블록의 반대쪽 가장자리에 도달할 때까지 제자리에 "고착"됩니다.

고정 기능에 영향을 미치는 오버플로

'위치: 고정'이 요소에 적용되었지만 동작이 예상과 다른 시나리오에서는 다음이 필수적입니다. 요소의 포함 블록과 존재할 수 있는 오버플로를 고려하세요.

요소와 포함 블록 관계

제공된 코드에서 '위치: 고정'( #footerNav)에는 포함 블록이 'html, body'로 설정되어 있습니다. CSS가 'html, body { height: 100% }'를 정의하므로 전체 뷰포트가 포함 블록이 됩니다.

오버플로 문제

그러나 #main div에는 '높이: 92%' 속성이 있는 반면 #footerNav에는 '높이: 8%'가 있으므로 콘텐츠가 결합된 것 이상으로 오버플로됩니다. '높이' 값입니다. 이 오버플로는 확장된 포함 블록을 생성하여 고정 요소가 조기에 반대쪽 가장자리(즉, #main의 하단)에 도달할 수 있도록 합니다. 결과적으로 고정 요소는 브라우저 창 하단에 도달할 때까지 고정된 상태로 유지되는 대신 #main 끝에 고정된 것으로 나타납니다.

해결책

해결 방법 문제가 발생하면 #main 요소의 높이 제한을 제거하여 콘텐츠가 자연스럽게 오버플로되도록 할 수 있습니다. 이렇게 하면 스크롤 컨테이너가 전체 뷰포트에 유지되고 고정 요소가 예상대로 작동하며 페이지의 실제 하단에 도달할 때까지 고정된 상태로 유지됩니다.

위 내용은 정의된 요소 높이에서 '위치: 고정'이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!