'bottom: 0'을 사용한 고정 위치 지정이 MDN 문서와 비교하여 반대 동작을 나타내는 이유는 무엇입니까?

고정 위치 지정의 반대 동작 이해

MDN 문서에서 고정 위치 지정은 상대 위치 지정과 고정 위치 지정의 하이브리드로 설명됩니다. 요소는 임계값을 초과할 때까지 상대적으로 위치가 지정된 요소처럼 작동하고 그 이후에는 고정 위치 요소로 작동합니다. 그러나 끈적한 위치 지정을 위해 Bottom: 0을 지정하면 동작이 반대인 것 같습니다.

고정 위치 지정 메커니즘

MDN에 따르면 끈적한 위치 요소는 다음과 같이 작동합니다. 두 가지 상태:

1. 상대 모드: 요소는 컨테이너 또는 정적 상위의 흐름을 기준으로 배치됩니다.
2. 고정 모드: 요소는 뷰포트를 기준으로 배치되며 고정된 위치에 유지됩니다.

지정된 임계값을 초과하면 이러한 상태 간의 전환이 발생합니다.

시나리오 설명

다음 예를 고려하세요.

<div class="container">
  <header></header>
  <main></main>
  <footer>
    <div class="footer"></div>
  </footer>
</div>

body {
  margin: 0;
}

.container {
  display: flex;
  height: 100vh;
}

.container>* {
  width: 100%;
}

footer {
  background: #faa;
  position: sticky;
  bottom: 0;
}

.footer {
  background: #aff;
  height: 100vh;
}

바닥글 요소에 Bottom: 0을 지정한 경우 임계값( 뷰포트 하단)이 처음부터 초과되었습니다. 아래로 스크롤해도 여전히 임계값을 초과하므로 바닥글은 고정 위치에 유지됩니다.

그러나 바닥글 요소가 임계값(뷰포트 하단)에 도달하면 상대 모드로 전환됩니다. 임계값은 더 이상 초과되지 않습니다. 이는 요소가 뷰포트 하단에서 0px 미만일 때 전환이 발생해야 한다는 MDN 문서의 제안과 반대입니다.

언어 오역

MDN 문서에 사용된 언어로 인해 모호성이 발생합니다. "임계값을 초과할 때까지"라는 진술은 상대 상태가 고정 위치 지정의 시작 상태임을 의미합니다. 그러나 항상 그런 것은 아닙니다. 요소가 고정으로 선언될 때 임계값을 이미 초과한 경우 고정 상태에서 시작됩니다.

결론

고정 위치 지정의 두 가지 상태와 전환 시기 이해 효과적으로 사용하려면 둘 사이에 발생하는 것이 중요합니다. MDN 문서에 설명된 동작은 임계값이 처음 초과되면 반전되어 예상과 ​​다른 동작이 발생할 수 있습니다.

위 내용은 'bottom: 0'을 사용한 고정 위치 지정이 MDN 문서와 비교하여 반대 동작을 나타내는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!