CSS position 속성값에 따라 요소의 배치 기준과 문서 흐름은 어떻게 달라지나요?

이렇게 답해 보세요 (핵심 답변)

기본값인 static은 일반적인 문서 흐름을 따르고, relative는 원래 흐름상의 자리를 그대로 차지한 채 자기 자신을 기준으로 시각적 위치만 이동합니다. 반면 absolute는 일반 흐름에서 완전히 빠져나와 static이 아닌 가장 가까운 조상(포함 블록)을 기준으로 배치되며, fixed는 기본적으로 브라우저 뷰포트에 고정됩니다. sticky는 평소에는 일반 흐름에 있다가 스크롤 위치가 지정한 임계값(top 등)에 닿으면 스크롤 컨테이너 안에서 고정되는 하이브리드 방식입니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. fixed 요소라도 조상 중에 transform, filter, perspective 등이 적용된 요소가 있으면 뷰포트 대신 그 조상이 새로운 기준점이 됩니다.
2. sticky가 제대로 동작하려면 top 같은 위치 임계값이 있어야 하고, 부모 컨테이너 안에 스크롤에 따라 이동할 수 있는 여유 공간이 남아 있어야 합니다.

면접에서 자주 하는 실수

z-index 숫자만 크게 준다고 해서 부모가 만든 쌓임 맥락(Stacking Context) 바깥의 요소보다 무조건 위에 올라가지는 않습니다.