main
section
article
static : HTML 문서에서 일반적인 흐름에 따라 배치, 기본값
relative : static과 마찬가지로 요소가 문서의 일반적인 흐름에 따라 배치. static과 차이점은 요소가 자신의 static 위치에서 top, right, bottom, left와 같은 속성에 의한 상대적인 위치에 배치.
absolute : 요소가 문서의 일반적인 흐름에 따르지 않게 한다. position:static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. 만약 부모 중에 포지션이 relative, absolute, fixed 인 태그가 없다면 가장 위의 태그(body)가 기준이 된다.
fixed : absolute와 마찬가지로 요소가 문서의 일반적인 흐름에서 제거된다. 대신, 스크린의 뷰포트(viewport)를 기준으로 한 위치에 배치됨. 즉 스크롤되어도 움직이지 않는 고정된 자리를 갖게 된다.
sticky : 요소가 HTML 문서안에서 static과 같이 일반적인 흐름에 따라가다가 스크롤 위치가 임계점에 이르면 fixed와 같이 박스를 화면에 고정할 수 있는 속성, 오로지 top만 적용됨.
static
relative 예
absolute
fixed
sticky
스크롤이 생기기 위한 그냥 박스 - fixed 테스트용