정적 및 상대 위치 지정

position 속성은 문서 흐름에서 요소가 배치되는 방식을 제어합니다. 값은 다섯 가지로 static, relative, absolute, fixed, sticky가 있습니다.

모든 요소의 기본값은 position: static입니다. 정적 요소는 일반 문서 흐름을 따릅니다. 블록 요소는 세로로 쌓이고 인라인 요소는 왼쪽에서 오른쪽으로 배치됩니다. 오프셋 속성(top, right, bottom, left)은 아무런 효과가 없습니다.

position: relative는 요소를 일반 흐름에 유지하면서 top, right, bottom, left를 사용해 자체의 일반 위치를 기준으로 이동할 수 있게 합니다.

오프셋과 함께 position: relative를 사용하면 요소가 화면에서는 이동하지만 원래 레이아웃 공간은 여전히 확보된 상태로 유지됩니다. 다른 요소가 그 빈 공간을 채우지 않습니다.

오프셋 속성은 기준점에서 요소를 이동합니다:

• top: 위쪽 가장자리에서 아래로 이동합니다
• left: 왼쪽 가장자리에서 오른쪽으로 이동합니다
• 음수 값은 방향을 반대로 바꿉니다

z-index는 위치가 지정된 요소(static이 아닌 요소)에서만 작동합니다. 레이어 순서를 제어해야 한다면 최소한 position: relative를 설정합니다.

position: relative의 가장 중요한 용도는 오프셋 값을 지정하지 않아도 요소를 절대적으로 배치된 자식 요소의 포함 블록으로 만드는 것입니다.

position: relative와 transform을 함께 사용하면 새로운 쌓임 맥락이 생성됩니다. 요소는 흐름에 남아 있지만 화면에서 변환할 수 있습니다.

모든 요소에 position: relative를 설정하지 마십시오. 쌓임 맥락이 생성되어 z-index 관리가 복잡해질 수 있습니다. 오프셋이 필요하거나 절대적으로 배치된 자식 요소를 기준점에 연결해야 할 때만 사용합니다.

상대적 배치는 레이아웃 흐름에 영향을 주지 않으므로 시각 효과를 위해 top/left를 안전하게 애니메이션할 수 있습니다. 다만 transform: translate()를 애니메이션하는 편이 성능 면에서 더 우수합니다.

DevTools에서 계산됨 패널을 확인하면 실제로 적용된 position 값을 볼 수 있습니다. 박스 모델 다이어그램에는 적용된 정확한 오프셋 좌표가 표시됩니다.

요소에 position: relative; top: 20px를 적용하면 레이아웃 공간은 어떻게 됩니까?

position: static은 기본값으로, 오프셋도 쌓임도 없습니다. position: relative는 요소 자체의 위치를 기준으로 이동할 수 있게 하면서 레이아웃 공간을 유지합니다. 가장 중요한 역할은 절대적으로 배치된 자식 요소의 포함 블록이 되는 것입니다.