'bottom: 0'이 있는 고정 위치 요소가 표시되지 않는 이유는 무엇입니까?

고정 위치 지정이 'bottom: 0'에서 작동하지 않는 이유

고정 위치 지정을 사용하면 요소가 포함 블록 내에서 고정된 상태를 유지할 수 있습니다. 지정된 임계값에 도달합니다. 다만, 'bottom:0'을 사용하면 이 동작이 없어 보일 수도 있습니다.

제공된 코드에서 "move" 요소에는 'position:sticky', 'bottom: 0'이 할당되어 있습니다. 고정 위치 지정의 정의에 따르면 요소는 흐름 루트 내의 임계값에 도달하면 고정됩니다. 그러나 주어진 예에서 "이동" 요소는 상위 블록에 상당한 여백 상단이 있기 때문에 표시되지 않습니다.

스크롤이 발생하면 상위 블록은 "이동" 요소에 대한 임계값을 넘어 결정된. 그러나 상위 블록이 화면 밖에서 숨겨지기 때문에 "이동" 요소도 숨겨집니다. 의도한 동작을 관찰하려면 상위 블록의 margin-top을 늘려 화면 밖으로 더 밀어냅니다.

따라서 고정 위치 지정을 사용한 '하단: 0' 설정은 작동하지만 아래에 충분한 공간이 필요합니다. 하단 가장자리에 고정된 상태로 남아 있는 요소를 관찰하기 위해 컨테이닝 블록을 사용합니다.

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