[ css ] 스크롤 상관없이 동일한 위치에 요소를 고정시키기 position: fiexd

위와 같이 우리가 화면의 스크롤을 마구마구 내려도

로고, 카테고리, 내가 찜한 콘텐츠가 있는 상단에 위치한 네비게이션 바는

동일한 위치에서 움직이지 않음을 볼 수 있다.

 position: fixed

CSS 속성 중에 position: fixed를 하면 이렇게 고정할 수 있다.

fixed는 요소를 문서의 뷰포트에 상대적으로 고정시키는 역할을 하는데

스크롤이 되더라도 항상 뷰포트의 특정 위치에만 고정되어 있다.

 

fixed의 특징은 항상 요소가 뷰포트 기준으로 위치가 고정되고

다른 요소들과의 겹침을 피할 수 있다. 그래서 다른 요소의 배치를 고려하지 않아도 된다.

또한 부모 요소 위치에도 영향을 받지 않는다.

 

헤더, 네비게이션 바, 공지사항, 광고 배너 같이 항상 표시되어야 하는 요소를

고정시키는 경우나 모달 창 등 항상 화면에 보이도록 해야하는 요소에 사용할 수 있다.