[CSS] position:fixed와 position:sticky의 차이

화면의 스크롤을 내리고 올릴 때, 화면 내의 특정 위치에 고정시키고 싶을 때 position:fixed와 position:sticky를 사용합니다.

이 둘의 큰 기능은 비슷하지만 자세히 들어가보면 다른 역할을 합니다.

Position: Fixed

Fixed는 화면에 절대적인(absolute)위치에 고정시킵니다.

position: fixed;

​

Position: Sticky

Sticky는 relative 속성처럼 동작하다가 스크롤이 특정 지점에 도달하면 그 요소를 화면의 그 위치에 붙입니다.

따라서 sticky 속성을 사용할 때는 top, bottom 등의 특정 위치 값을 제공하여 붙여질 위치를 제공해야 합니다.

position: sticky; 
top: 0;

​

fixed

sticky

 

 

화면 상단의 navbar에 fixed와 sticky를 적용시켜보고 확실히 알 수 있었습니다.

fixed를 navbar에 적용시키면 절대적인(absolute)위치에 고정되기 때문에 본문이 navbar 뒤로 들어갑니다.

하지만 stickys는 상대적인(relative)위치에 고정되므로 navbar밑으로 본문이 등장하는 것을 볼 수 있습니다.