'높이'를 설정할 때 '위치: 고정'이 작동하지 않는 이유는 무엇입니까?

'높이'를 설정할 때 '위치:고정'이 작동하지 않습니다.

알다시피 바닥글 요소에 높이 속성을 설정합니다. 아래로 스크롤할 때 페이지 상단에 달라붙는 것을 방지합니다. 이 동작은 고정 위치 지정 알고리즘의 작동 방식 때문에 발생합니다.

CSS 사양에 따르면 고정 요소는 포함 블록이 지정된 임계값을 넘을 때까지 상대적 위치 지정으로 처리됩니다. 귀하의 경우 포함 블록은 높이가 100%인 body 요소입니다. 높이가 92%인 기본 요소를 아래로 스크롤하면 바닥글 요소가 본문 요소의 맨 아래에 도달하고 포함 블록의 반대쪽 가장자리에 있는 것으로 간주됩니다. 따라서 더 이상 끈적거리지 않고 페이지 하단에 유지됩니다.

이 문제를 해결하려면 메인 요소에서 높이 속성을 제거하면 됩니다. 이렇게 하면 바닥글 요소가 의도한 대로 페이지 상단에 고정될 수 있습니다. 또는 본문 요소의 높이 속성을 100% 대신 100vh로 설정할 수 있습니다. 이렇게 하면 본문 요소가 항상 뷰포트와 동일한 높이를 유지하고 바닥글 요소가 기본 요소의 높이에 관계없이 페이지 상단에 고정됩니다.

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