[HTML/CSS] position:fixed와 sticky의 차이점 알아보기

 

position 속성의 기본값은 static이며 요소는 문서의 일반적인 흐름에 따라 배치됩니다.

 

position: fixed

fixed는 뷰포트 기준 즉 페이지 전체 영역 기준으로 배치되며 

일반 문서 흐름에서 요소가 제거되고

페이지 레이아웃의 요소에 대한 공간이 생성되지 않습니다.

 

모든 페이지에서 동일한 위치에 배치됩니다.

 

페이지가 스크롤되더라도 배치해 놓은 위치에 유지됩니다.

 

position: sticky

sticky는 사용자의 스크롤 위치를 기준으로 배치됩니다.

 

sticky는 fixed와 달리 화면에서 공간을 차지하며,

sticky를 선언한 요소의 부모 영역 안에서만 고정되어 스크롤에 따라 움직이게 됩니다.

 

sticky를 선언한 부모 영역이 스크롤 영역을 벗어나면 sticky를 선언한 요소는 다시 일반적인 흐름에 따릅니다.

 

기준이 되는 위치를 설정하기 위해 top, right, bottom, left 속성 중 최소 하나는 필수로 지정해 주어야 합니다.

 

부모 혹은 조상 엘리먼트에 overflow속성을 사용하면 sticky속성이 동작하지 않습니다.

가로사이즈가 100%를 넘지 않게 만들기 위해 최상단 엘리먼트에 overflow-x:hidden;과 같은 속성을 많이 사용하는데

이 경우 가로로 스크롤되는 상황은 막을 수 있지만 position: sticky는 사용할 수 없게 됩니다.

 

 

See the Pen Untitled by hy0ni (@hy0ni) on CodePen.