"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > `위치 : 끈적 끈적한 이유와`하단 : 0 '이 MDN 설명과 반대되는 이유는 무엇입니까?

`위치 : 끈적 끈적한 이유와`하단 : 0 '이 MDN 설명과 반대되는 이유는 무엇입니까?

2025-04-30에 게시되었습니다
검색:753

Why Does `position: sticky` with `bottom: 0` Behave Opposite to MDN\'s Description?

제공된 코드 예제에서

].

바닥 글 { 위치 : 스티커; 하단 : 0; }

mdn은 뷰포트 하단에서 0px 미만으로 이동할 때까지 바닥 글 요소가 먼저 비교적 배치되어야한다고 명시합니다. 그러나 관찰 된 행동은 반대입니다 :
아래로 스크롤 할 때 :

바닥 글은 고정 위치로 시작한 다음 바닥 글의 바닥이 뷰포트의 바닥에서 0px에 도달 할 때 비교적 위치가됩니다. 바닥 글의 바닥이 뷰포트의 바닥에서 0px를 지나면

  • 반대 행동에 대한 이유
  • 이 행동을 이해하는 열쇠는 MDN 정의의 문구에 있습니다. "
이는 초기 위치가 HTML 구조와 지정된 임계 값까지의 거리에 의해 결정됨을 의미합니다. 하단의 경우 : 0, 바닥 글은 이미 페이지가로드 될 때 뷰포트의 하단에 있습니다. 따라서 임계 값 (하단에서 0px)이 이미 초과 되었기 때문에 "고정 된"상태에서 시작됩니다.

하단을 지정할 때 요소가 고정 된 위치로 전환 될 때 요소가 바닥이 이동할 때 요소가 고정되어 있습니다. 이 동작은 HTML 구조에 의해 결정되고 지정된 임계 값에 근접한 초기 위치로 인해 MDN 문서의 설명 된 동작과 반대입니다.

최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3