[기술면접준비] position의 정의와 사용방법

CSS에서 position은 요소(element)를 배치하는 방법을 제어하는 속성입니다. position 속성을 사용하여 요소를 문서 내에서 상대적 또는 절대적인 위치로 이동시킬 수 있습니다.

position 속성에는 다음과 같은 값들이 있습니다.

1. static: 요소의 위치를 일반적인 문서 흐름에 따라 배치합니다. 즉, 다른 position 값이 없는 경우 기본값으로 설정됩니다.
2. relative: 요소를 일반적인 문서 흐름에 따라 배치하면서, 자신의 위치를 기준으로 top, bottom, left, right 속성을 사용하여 상대적으로 이동시킬 수 있습니다.
3. absolute: 요소를 문서 상의 위치를 기준으로 상대적인 위치가 아닌 절대적인 위치로 이동시킵니다. 이때, 가장 가까운 조상 요소 중 position 값이 relative, absolute, fixed, sticky인 요소를 기준으로 위치를 지정합니다.
4. fixed: 요소를 뷰포트(Viewport)를 기준으로 상대적인 위치가 아닌 절대적인 위치로 이동시킵니다. 즉, 스크롤해도 요소의 위치가 변하지 않습니다.
5. sticky: 요소를 일반적인 문서 흐름에 따라 배치하면서, 특정 위치를 지나면 상대적인 위치가 아닌 절대적인 위치로 이동시킵니다. 이때, 가장 가까운 스크롤 가능한 조상 요소를 기준으로 위치를 지정합니다.

position 속성은 일반적으로 요소의 위치를 조절하기 위해 사용됩니다. 예를 들어, position 속성을 사용하여 메뉴를 상단에 고정시키거나, 이미지를 다른 요소와 겹치게 배치할 수 있습니다. 또한, position 속성을 조절함으로써 요소의 레이아웃을 조절할 수 있습니다. 하지만, position 속성은 요소의 위치를 조절하는 것 외에도 높이, 너비 등의 속성에도 영향을 미칠 수 있으므로, 사용할 때 주의가 필요합니다.