CSS : sticky 와 fixed

홈페이지를 만들 때 보통 헤더에 position=fixed; ,top =0;값을 주면 고정이 잘만 됐는데 이번에 인스타 메인 페이지 클론을 하면서 헤더가 고정이 되지 않는 것이다.....🤦‍♀️🤦‍♀️!!!!!

정확히 말해서는 고정은 됐지만 같이 올라가는 이상한 현상(?)을 보고 "아,이게 아니야 아니야" 하면서 열심히 구글링을 했다.
그 결과 fixed 값이 아닌 sticky 값을 주니 내가 원하는 방향으로 잘 고정이 됐던 것이다....!

하지만 이러한 변화를 정확히 설명하기에는 나 스스로 너무 막연하게 이해를 하고 있었고 구글링과 유튜브를 찾아보며 이해했다.

position : sticky

sticky라는 단어 뜻은 '달라붙다' 라고 해석 되는데 그 단어의 뜻에 접근하여 다가가니 이해하기 쉬웠다.(껌이 특정 어딘가에 달라붙는 모습)
즉, sticky 는 속성값을 선언한 영역의 위치값을 고정 시켜주는 역할을 한다.

sticky를 사용하면 꼭 top.left와 같은 위치값을 작성해줘야 sticky가 적용된다.

skicky와 fixde 차이

fixde는 페이지 전체 영역을 기준으로 고정이 되고 sticky의 경우는 부모 요소를 기준으로 움직이게 된다. 즉, skicky 선언한 영역의 부모 요소 안에서만 고정이 되기 때문에 그 영역을 넘어가면 따라오지 않고 걸리게 된다....!