[CSS] 헤더를 고정시켜보자!

이 글을 시작으로 몇 개의 포스팅은 기업과제를 하면서 부족하다고 느낀 개념을 정리해보는 글이 될 것 같다.

특히나 sticky의 경우, 웹 SQL 프로젝트를 할 때에도 sticky한 헤더를 만드는 것이 내 담당이었는데

그 당시에도 부족한 개념을 억지로 가져다 쓰려고만 하는 느낌이 들었었기에 이번에 쉽게 정리를 해보고자 한다.

🔮 position의 역할

화면상에서 어떤 요소의 위치를 어디에 줄지 결정해주는 속성

📍 position: sticky

• 일반적인 문서 흐름에 따라 배치
• 부모 요소를 기준으로 top, bottom, left, right를 통해 위치 선정 (필수)
• 최초 스크롤 시 일반적인 문서 흐름을 따라 움직이지만, 스크롤이 특정 지점에 도달하면 fixed처럼 고정

📍 position: fixed

• 일반적인 문서 흐름에서 제외
• 뷰포트를 기준으로 top, bottom, left, right를 통해 위치 고정
• 스크롤이 되어도 뷰포트 기준이기 때문에 화면에서 사라지지 않고 같은 위치에 고정

기본 예시

See the Pen Untitled by Jeongeum (@jeongeum) on CodePen.

fixed의 경우 문서 흐름에서 제외 되었기 때문에 부모 요소(Parents) 안의 텍스트의 위로 겹쳐보이면서 위치가 고정되어있다.
하지만 sticky의 경우는 문서 흐름에 따라 배치는 되어있지만 스크롤을 내리다가 특정 지점(top:50px)에 도달하면 fixed 속성처럼 행동한다.

실제 예시

See the Pen Untitled by Jeongeum (@jeongeum) on CodePen.

헤더가 top:0 지점에 도달했을 때 fixed 속성처럼 행동하면서 고정되도록 할 수 있다.
그럼 메인에 있는 내용들은 스크롤되어 올라가도 헤더는 항상 볼 수 있는 상태가 된다.