w3.css
고정 이미지
CSS를 사용하여 고정 이미지를 만드는 방법을 알아보자.
⭐ 이 예는 Internet Explorer 또는 Edge 15 이하 버전에서는 작동하지 않는다.
고정 이미지 만드는 방법
1단계) HTML 추가
<img class="sticky" src="img_avatar.png" alt="Avatar">
2단계) CSS 추가
img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
기본 예시
예제 보기요소는 position: sticky;사용자의 스크롤 위치를 기준으로 배치된다.
고정 요소는 스크롤 위치에 따라 relative 요소와 fixed 요소 사이에서 전환한다.
뷰포트에서 주어진 오프셋 위치가 충족될 때까지 상대적인 위치에 배치된다. 그런 다음 위치에 “고정”된다(예: 위치:고정).
참고: Internet Explorer, Edge 15 및 이전 버전은 고정 위치 지정을 지원하지 않는다. 사파리에는 -webkit- 접두사가 필요하다. 또한 고정 위치 지정이 작동하려면 위쪽, 오른쪽, 아래쪽 또는 왼쪽 중 적어도 하나를 지정해야 한다.
참고
W3C School - How TO - Sticky Image
공부 목적 블로그