'bottom: 0'이 있는 고정 요소가 고정된 것처럼 보이지 않는 이유는 무엇입니까?

CSS 고정 위치 지정과 위쪽 및 아래쪽 동작 이해

CSS의 고정 위치 지정을 사용하면 요소가 다음 시점까지 포함 블록 내에 고정된 상태로 유지됩니다. 특정 임계값이 교차되면 상대적으로 위치가 지정됩니다. 하지만 끈끈한 요소에 'bottom: 0'을 사용하면 불일치가 있는 것으로 보입니다.

문제 설명:

다음 코드를 고려하세요.

<div class="block">
  <div class="move">
  </div>
</div>

.block {
  background: pink;
  width: 50%;
  height: 200px;
}

.move {
  position: sticky;
  bottom: 0;
}

'이동'을 'top:0'으로 설정하면 상단에 붙는다. 분홍색 블록이 예상대로 작동합니다. 하지만 '이동'을 '하단:0'으로 설정하면 분리된 것처럼 보이고 더 이상 고정된 상태로 유지되지 않습니다.

끈적 요소가 있는 '하단:0'의 동작 이해:

이 동작을 이해하려면 끈끈함의 정의를 이해하는 것이 중요합니다. positioning:

A stickily positioned element remains relatively positioned until its containing block crosses a specified threshold (such as setting 'top' to a value other than 'auto'), after which it becomes 'stuck' until meeting the opposite edge of its containing block.

'bottom: 0'의 경우 끈적한 요소는 포함 블록의 아래쪽 가장자리에 붙어 있기 때문에 표시되지 않습니다. 스크롤 위치가 임계값을 통과하면 포함 블록은 위로 이동하지만 고정 요소는 아래쪽 가장자리에 고정된 상태로 유지됩니다. 끈끈한 요소는 이미 바닥에 있으므로 더 이상 위쪽으로 이동할 수 없습니다.

끈적끈적한 동작을 관찰하려면 포함 블록의 높이가 끈끈한 요소를 수용할 수 있을 만큼 충분한지 확인하세요. 블록 요소에 상당한 상단 여백을 제공하면 페이지를 스크롤하여 끈적한 요소가 하단에 달라붙는 것을 확인할 수 있습니다

위 내용은 'bottom: 0'이 있는 고정 요소가 고정된 것처럼 보이지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!