position 속성은 요소들이 화면에 어떻게 배치될지를 지정한다.
특이사항으로는, 이 속성은 자식 요소에게 대물림되지 않는다는 점이 있다.
static은 기본값으로, 전적으로 페이지의 흐름을 따르며 top, bottom, left, right, z-index 속성의 영향을 받지 않는다.
relative 값은 원래 위치를 기준으로 top~right 속성값이 적용되도록 한다.
요소의 위치는 이동하지만 요소가 차지하는 공백의 위치는 유지된다.
(의자는 그 자리에 두고 나만 움직인다. 다른 사람들의 의자도 가만히 있다.)
fixed는 부모 요소가 아닌 viewport를 기준으로 위치를 지정한다.
스크롤에 영향을 받지 않으므로, 다이얼로그 팝업처럼 움직이지 않는 요소들에 유용하게 사용될 수 있다.
sticky는 요소가 스크롤로 이동할 수 있는 공간을 top~right 속성으로 제한할 수 있다.
어떤 요소 안에 넣지않아야 -> 가장 바깥쪽에 두어야 간섭을 받지 않는다. padding의 값에 영향을 받는다.
z-index 속성은 static이 아닌 요소들간 위아래 배치 순서를 지정한다.
auto는 0과 같으며, 같은 값의 요소들 중에는 나중에 배치된 것이 위로 올라오게 된다.