`bottom: 0`이 포함된 `position:sticky`가 MDN의 설명과 반대로 동작하는 이유는 무엇입니까?

위치의 반대 동작: 끈적한 바닥: 0

위치 지정: 끈적한 바닥: 0으로 지정하면 정의와 다르게 동작합니다. MDN에서 제공. 요소가 임계값을 초과하여 고정될 때까지 처음에 요소가 상대적인 위치로 처리되는 설명과 달리, Bottom: 0을 지정하면 반대가 발생합니다.

제공된 코드 예에서:

<footer>
  <div class="footer"></div>
</footer>

footer {
  position: sticky;
  bottom: 0;
}

MDN에서는 바닥글 요소가 뷰포트 하단에서 0px 미만으로 이동할 때까지 먼저 상대적인 위치에 있어야 한다고 명시하고 있습니다. 그러나 관찰된 동작은 그 반대입니다.

• 아래로 스크롤할 때: 바닥글은 고정된 위치에서 시작하여 바닥글 하단이 하단에서 0px에 도달하면 상대적으로 위치가 지정됩니다.
• 위로 스크롤할 때: 바닥글은 상대적인 위치에서 시작하여 다음과 같은 위치에 고정됩니다. 바닥글 하단이 뷰포트 하단에서 0px를 지나 이동합니다.

반대 동작의 이유

이 동작을 이해하는 열쇠는 MDN 정의의 표현: "지정된 임계값이 될 때까지 상대 위치 요소로 처리됩니다. 초과했습니다."

이는 초기 위치가 HTML 구조와 지정된 임계값까지의 거리에 의해 결정된다는 의미입니다. 하단: 0의 경우 페이지가 로드될 때 바닥글이 이미 뷰포트 하단에 있습니다. 즉, 임계값(하단에서 0px)이 이미 초과되었기 때문에 "고정" 상태에서 시작됩니다.

결론

따라서 위치를 지정할 때는 다음과 같이 고정합니다. 하단: 0, 요소는 처음에 위치가 고정되고 요소가 뷰포트 하단을 지나 이동할 때 상대 위치로 전환됩니다. 이 동작은 HTML 구조에 의해 결정되는 초기 위치와 지정된 임계값에 대한 근접성으로 인해 MDN 문서에 설명된 동작과 반대입니다.

위 내용은 `bottom: 0`이 포함된 `position:sticky`가 MDN의 설명과 반대로 동작하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!