position sticky 안될때 사용법

 

position:static

static 속성은 기본값으로 요소를 일반인 문서의 흐름에 따라 배치한다. top, left, right, bottom, z-index 속성이 아무런 영향도 주지 안는다.

 

positon:fixed

fixeld 속성은 일반적인 흐름에서 제거하고 페이지 레이아웃에 공간도 배정하지 않고 뷰포트를 기준으로 고정값을 가진다.

 

 position:sticky

sticky 속성은 평소에는 position:relative 상대 위치  요로 처리하지만 스크롤이 특정 영역에 들어오면 fixed 처럼 화면에 고정된다.

 sticky박스의 부모 박스가 스크를box를 벗어나게 되면 다시 일반적인 흐름에 따라 움직이게 된다.

 

 

sticky 속성이 안될때

1. top, left, right, bottom 속성 중 하나는 반드시 있어야 한다.
2. 부모 또는 조상 노드에 overflow가 설정되어있으면 안 된다.
3. sticky 속성을 갖는 엘리먼트의 부모 노드는 반드시 height 값이 설정되어 있어야 한다.