[멋사/css] Postition:fixed 와 sticky 의 차이

postition: fixed

fixed는 일반적인 문서 흐름에서 완전히 제외되고 뷰포트을 기준으로 고정합니다
그리고 원하면 top, right, bottom, left 로 위치를 지정할 수 있습니다
고정되어 있기 때문에 스크롤을 내려도 원하는 위치에 고정되어있습니다

주로 스크롤 상관없이 상단에 고정되는 Header의 nav 기능에 사용됩니다

 

position: sticky

1. 최초에 relative(static) 속성처럼 동작하면서 스크롤 위치가 임계점(지정된 위치)에 이르면
   fixed와 같이 박스를 화면에 고정합니다
2. fixed 와는 다르게 top, right, bottom, left 의 값에 따라 오프셋이 적용하므로 값은 필수로 있어야합니다
3. sticky 가 적용된 요소의 부모 요소가 scroll 영역을 벗어나면 sticky 가 적용된 요소는
   다시 일반적인 문서 흐름을 따릅니다 (고정이 풀림) 

4. sticky 는 바로 위 부모요소에 overflow 속성이(visible 제외) 적용되면 sticky 속성이 적용되지 않습니다

 

See the Pen Untitled by wonhyeonglee (@bigfile57) on CodePen.

 

 

블로그로 보기가 힘들어서 전체페이지로 예제를 보시기 바랍니다

기본적으로 맨 위 heading h1 태그가 fixed , 우측 배너를 sticky 속성을 적용한 예제입니다
fixed 속성과 sticky 1,2를 확인할 수 있습니다

3번 특성은 스크롤을 하다가 고정이 멈추는 순간을 볼 수 있는데 바로 위 부모요소인 div.container 의 영역을 벗어났기
때문입니다. 좀 더 극단적으로 보려면 div.container 에 height 값을 작게 주면 됩니다

 

4번 특성을 확인하려면 div.container 요소에 overflow: hidden 등 visible 을 제외한 속성들을 적용해보면 
sticky가 적용되지 않는 것을 확인 할 수 있습니다

 

여러 차이가 있는데 가장 큰점은 sticky 속성은 여러 개가 올 수 있다는 점입니다.
https://tech.lezhin.com/2019/03/20/css-sticky

CSS { position: sticky }

한눈에 볼 수 있는 글이 있어서 가져왔습니다.