Sticky예제
( 스크롤 하기전 sticky요소가 relative하게 위치한 모습 )
( 스크롤 후 sticky요소가 viewport기준으로 top:10px부분 부터 fixed하게 위치한 모습 )
Position 설명
1.static
position 속성을 지정하지 않으면, 기본값으로 static이 설정됩니다.
이는 웹페이지에서 그 요소가 자연스럽게 있어야 할 곳에 그대로 있게 해줍니다 (원래 위치)
top, left, bottom, right 속성 값이 적용되지 않습니다.
2. relative
relative로 설정된 요소는, 단독으로 사용될때는 static과 마찬가지로 원래 위치에 위치합니다
그러나 top, left, bottom, right 속성 값을 사용하여, 해당 요소를 원래 위치로 부터 이동시키는것이 가능합니다
( 보통 현재 위치로 부터 top, left, bottom, right등을 사용해서 요소를 움직이고 싶을때 사용한다 : 평소 자주 사용하는 패턴 )
( 또한 z-index는 static일때 사용할수없기때문에 relative를 설정해서 사용하기도 한다 )
3. absolute
absolute로 설정된 요소의 위치는 가장 가까운 position이 relative, absolute, 또는 fixed로 설정된 상위 요소를 기준으로 위치합니다.
그런 상위 요소가 없다면, 문서의 <body> 요소를 기준으로 합니다.
top, left, bottom, right 속성 값을 사용하여, 상위 요소 또는 <body>를 기준으로 위치를 조정할 수 있습니다.
4. fixed
fixed로 설정된 요소는 뷰포트를 기준으로 위치합니다.
이는 스크롤을 해도 해당 요소가 고정된 위치에 있음을 의미합니다.
top, left, bottom, right 속성 값을 사용할 수 있습니다.
5. sticky
sticky로 설정된 요소는 기본적으로 relative와 같이 동작하지만, 스크롤 위치가 특정 임계점에 도달하면 뷰포트에 대해 fixed처럼 고정됩니다.
이 동작은 top, left, bottom, right 중 적어도 하나의 값을 지정했을 때 유효합니다.
( 즉 평소에는 relative로 동작하다가 해당 요소가 viewport의 top, left, bottom, right에 일치했을때 fixed로 동작함 )
참고한 사이트