[CSS] position:fixed와 sticky

화면 상단의 nav를 포함한 header나 스크롤을 내리면 화면 상단으로 올라가게 하는 버튼 등의 위치가 고정되어 있는 position : fixed 기능은 흔히 보여 알고 있었는데 position : sticky 속성은 CSS 수업을 들으며 처음 알게 되었다. 따라서 오늘은 이 둘의 차이를 비교해보려고 한다.

📍 position 속성의 역할

• 문서 상에서 요소를 배치하는 방법을 정의한다.
• 기본값은 position : static으로, 일반적인 html 문서의 흐름대로 요소를 배치하는 방식을 의미한다.
  
  

📌 position : fixed

• 일반적인 문서 순서가 아닌, 화면 내 지정된 위치에 고정시킨다.
• 스크롤을 내려도 원하는 위치에 고정되어 있다.

📌 position : sticky

• 지정한 스크롤 위치에 도달하기 전까지는 static 속성처럼 행동하다가 뷰포트 기준으로 정해놓은 offset에 닿으면 fixed처럼 고정된다.
• top, bottom, left, right 중 하나를 필수적으로 지정해주어야 한다. (=offset)
• 콘텐츠마다 다른 정보를 고정해야 하는 경우 유용하게 사용할 수 있는 속성이다.
• IE에서 지원되지 않는 기능이다. (caniuse 사이트)

• 부모 혹은 조상 요소에 overflow 속성이 지정되어 있으면 sticky 속성이 작동하지 않으니 offset을 지정해야 하는 것과 더불어 유의해서 사용해야 한다!