[CSS] Position 속성

Position 속성

Position 속성은 문서 안 요소들을 정하는 속성이다.
top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.

static

아무 값도 넣지 않으면 되는 디폴트값으로, top, left, bottom, right 값을 전부 무시한다.

relative

원래 있어야 하는 자리를 기준으로 위치를 지정한다.

absolute

relative 한 부모 요소를 찾아 위로 이동한다.
부모에 relative 가 없다면, 상단 위 0,0 기준으로 목표값이 정해지고 변경된다.

Fixed

브라우저의 최상단에 고정.
마우스 스크롤을 따라 다니는 요소로, z-index 를 이용해 최상위 개체에 있는 것이 좋음.

sticky

문서 요소 따라 배치되나, 가장 가까운 부모 element 에 배치된다.
이후 스크롤 위치가 도착하면 Fixed 처럼 정해진 위치에 고정된다.