작성 방법: 스티키 이미지

CSS를 사용하여 스티키 이미지를 생성하는 방법을 배우세요.

스티키 이미지

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

개인적으로 테스트해 보세요

설정됩니다 position: sticky; 요소는 사용자의 스크롤 위치에 따라 위치를 설정합니다.

스티키 요소는 스크롤 위치에 따라 상대적 위치와 고정 위치 사이에서 전환됩니다. 특정 오프셋 위치에 도달하기 전까지는 상대적 위치 - 그런 다음 그 자리에 '粘'하게 됩니다(예를 들어 position:fixed)

주의:Internet Explorer, Edge 15 및 이전 버전은 스티키 레이아웃을 지원하지 않습니다. Safari는 -webkit- 프리픽스(예시 참조). 스티키 레이아웃을 적용하려면 최소한 top、right、bottom 또는 left 의 일부로서。

관련 페이지

강의:CSS 이미지

강의:CSS 정위치