`bottom: 0`이 있는 `position: 끈적끈적`이 바닥에 붙지 않는 이유는 무엇입니까?

Bottom:0이 Position: Sticky와 작동하지 않는 이유

position을 사용하여 상위 요소의 아래쪽에 요소를 배치하려고 할 때 : 끈적끈적하고 하단: 0인 경우 이 문제가 발생할 수 있습니다. 끈적이는 요소를 컨테이너 상단에 효과적으로 유지할 수 있지만 하단에서는 그렇게 하지 못합니다.

이유는 위치 정의에 있습니다. 문서에 따르면 고정적으로 배치된 요소는 포함 블록이 특정 임계값에 도달할 때까지 상대적으로 배치된 것으로 간주됩니다. 그러나 포함 블록의 반대쪽 가장자리를 만나면 "고착"됩니다.

제공된 코드에서 위치: 고정 및 하단: 0인 요소는 포함 블록의 하단에 한 번만 고정됩니다. (이 경우 분홍색 블록)은 흐름 루트(요소가 위치한 곳)의 반대쪽 가장자리에 도달합니다. 상단 요소와 마찬가지로 흐름 루트 내 상단 가장자리에 도달해야 고정되거나 접착됩니다.

그러나 접착 요소의 하단이 이미 가장자리에 있으므로 반대쪽 가장자리가 없습니다. 달라붙게 됩니다. 결과적으로 요소는 하단에 고정될 수 없으며 단순히 초기 위치에 유지됩니다.

시연을 위해 블록 요소의 여백을 늘려 화면 외부에 배치합니다. 천천히 스크롤하면 접착 요소가 흐름 루트 내 반대쪽(상단) 가장자리에 도달하면 분홍색 블록의 하단으로 이동하는 것을 볼 수 있습니다.

위 내용은 `bottom: 0`이 있는 `position: 끈적끈적`이 바닥에 붙지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!