설정 하지 않았을때 (position: static ) 기본은 요소가 일반적인 문서 흐름에 따라 다른 요소와 겹치지 않고 자연스럽게 쌓이며 배치됩니다. top, right, bottom, left 속성 무시: static 위치 속성을 가진 요소는 top, right, bottom, left 속성을 사용하여 위치를 조절할 수 없습니다.

position: relative; 부모 요소의 컨텍스트 내에서 동작합니다.

position: absolute; 부모 요소의 컨텍스트 내에서 동작합니다.

position: relative;

부모 요소 내에서 자신의 원래 위치를 기준으로 상대적인 위치를 조절합니다.

부모 요소의 레이아웃 흐름에 영향을 미치지 않으며, 다른 요소와 겹치지 않습니다.

부모 요소의 위치를 변경할 때, position: relative;로 설정된 자식 요소도 함께 움직이지만, 다른 요소에 영향을 주지 않습니다.

position: absolute;

부모 요소 중에서 position 속성이 static이 아닌(기본 값) 첫 번째 부모 요소를 기준으로 위치를 결정합니다.

부모 요소의 레이아웃 흐름에서 제거되며, 다른 요소와 겹칠 수 있습니다.

부모 요소의 위치를 변경하면 position: absolute;로 설정된 자식 요소도 영향을 받아 위치가 변경됩니다.

position: sticky

스크롤될 때 일정 위치에서 고정되도록 하는 속성입니다.부모 요소의 영향을 받습니다.top, right, bottom, left 속성을 사용하여 고정되는 위치를 지정할 수 있습니다.

position: fixed;

viewport 기준 절대 좌표 고정입니다.