방법 - 고정 이미지
CSS로 고정 이미지를 만드는 방법을 알아보세요.
스티커 이미지
참고: 이 예제는 Internet Explorer 또는 Edge 15 및 이전 버전에서 작동하지 않습니다.
스티커 이미지
예시
img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
가 있는 요소 position: sticky;
는 사용자의 스크롤 위치를 기준으로 배치됩니다.
고정 요소 는 스크롤 위치에 따라 relative
및 사이를 전환합니다. fixed
주어진 오프셋 위치가 뷰포트에서 만날 때까지 상대적으로 배치된 다음 제자리에 "고정"됩니다(예: position:fixed).
참고: Internet Explorer, Edge 15 및 이전 버전은 고정 위치 지정을 지원하지 않습니다. Safari에는 -webkit- 접두사가 필요합니다(아래 예 참조). 또한 고정 위치 지정이 작동하려면 top
, 또는 right
중 하나 이상을 지정해야 합니다 .bottom
left
CSS 포지셔닝 에 대해 자세히 알아보려면 CSS Position 튜토리얼을 읽어보세요.
이미지 스타일을 지정하는 방법에 대해 자세히 알아보려면 CSS 이미지 자습서를 읽어보세요.