`bottom:0`이 내 `position:sticky` 요소를 즉시 고정하지 못하는 이유는 무엇입니까?

"bottom:0"이 Position:Sticky와 작동하지 않는 것 같은 이유

"bottom:0"을 다음과 함께 사용하려고 할 때 "위치:고정"의 경우 처음에는 요소가 끈적해지지 않는 것처럼 보일 수 있습니다. 그러나 이는 사실이 아니다. 이 동작을 이해하기 위해 "고정"의 정의를 살펴보겠습니다.

CSS 사양에 따르면 "위치:고정"이 있는 요소는 포함 블록이 임계값을 넘을 때까지 상대적인 위치를 유지합니다. 이 시나리오에서 포함 블록은 분홍색 "블록" 요소입니다.

"bottom:0"을 설정하면 포함 블록의 하단이 브라우저 창에 표시될 때 "이동" 요소가 고정됩니다. . 그러나 테스트 코드에서 "block" 요소의 높이는 200px이고 "move" 요소는 그 안에 배치됩니다. 즉, 기본적으로 "이동" 요소는 해당 포함 블록 내의 표시 영역 하단에 이미 배치되어 있습니다. 결과적으로 끈적해지기 위해 필요한 임계값을 결코 만나지 않습니다.

"bottom:0"이 "position:sticky"와 어떻게 작동하는지 보여주기 위해 "block" 요소에 큰 여백을 주어 이동시킬 수 있습니다. 화면에서 벗어났습니다. 스크롤을 시작하면 "차단" 요소가 브라우저 창 상단을 지나 스크롤할 때 "이동" 요소가 보이는 화면 하단에 달라붙기 시작하는 것을 볼 수 있습니다.

위 내용은 `bottom:0`이 내 `position:sticky` 요소를 즉시 고정하지 못하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!