[CSS] position - sticky / fixed + ( position 정리 )

스크롤 전

스크롤 후

1. position : fixed

fixed는 들어있는 박스는 상관 없이 viewport를 기준으로 위치를 설정한다.

웹 페이지가 스크롤 되어도 설정해준 값으로 위치가 고정되어 항상 같은 곳에 위치하게 된다. 

 

2. position : sticky

sticky는 static의 속성과 fixed의 속성의 특징을 모두 가지고 있다. 

sticky는  설정한 위치값에 도달하기 전까지는 변화없이 static처럼 행동하지만, 도달 이후에는 fixed처럼 해당 위치에 고정 된다.

 

sticky를 사용할 때에는 위치를 꼭 정해줘야한다. postion을 정해주지 않으면 변화가 없다!

sticky는 들어있는 박스안에서 position 변경이 일어난다.

 

---

정리

static / relative / sticky

들어있는 박스안에서 위치 변경이 일어난다.

absolute

근접한 부모 박스들 중에서 static이 아닌 박스에서 위치 변경이 일어난다.

 

fixed

들어있는 박스랑을 상관없이 브라우저에서 보여지는 viewport에서 위치 변경이 일어난다.