[CSS] Position : Sticky

 

 

CSS position 속성은 요소를 배치하는 방법을 지정한다.

position의 속성값으로는 static, absolute, fixed, sticky가 있고, 각 속성의 배치 유형을 알고 사용하면 된다.

Sticky의 경우 Position의 계산값(상속 과정에서 부모가 자식에게 물려주는 값)이 sticky인 요소이다. 평소에는 relative인 요소처럼 상대 위치 지정 요소로 처리하지만, 컨테이닝 블록(위치의 기준점이 되는 부모 요소)이 자신의 플로우 루트(또는 스크롤 컨테이너)에서 지정한 특정 임계값을 넘으면 마치 fixed처럼 화면에 고정한다. 고정 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제된다. 

 

사용 예시 :

See the Pen Sticky CSS by hyoeun (@hyonixk) on CodePen.

 

 

---

MDN Position : https://developer.mozilla.org/ko/docs/Web/CSS/position