스티키 요소를 어떻게 생성하나요

CSS를 사용하여 스티키 요소를 사용하는 방법을 배우세요.

직접 시험해 보세요

주의:이 예제는 Internet Explorer나 Edge 15 및 이전 버전에 적용되지 않습니다.

스티키 요소

예제

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

직접 시험해 보세요

position: sticky;를 사용하는 요소는 사용자의 스ROLL 위치에 따라 정위치됩니다.

스티키 요소는 상대 정위치와 고정 정위치 사이에서 스ROLL 위치에 따라 전환됩니다. 시점에서 지정된 오프셋 위치에 도달하기 전까지는 상대 정위치로, 그런 다음 그대로에 '粘'합니다 (position:fixed와 같이).

주의:Internet Explorer, Edge 15 및 이전 버전은 스티키 정위치를 지원하지 않습니다. Safari는 -webkit- 프롬프트가 필요합니다(아래 예시 참조). 스티키 정위치가 적용되기 위해 top, right, bottom 또는 left 중 하나를 최소한 지정해야 합니다.

관련 페이지

강의:CSS 정위치