위치 지정: relative, absolute, fixed, sticky

기본적으로 요소는 일반 문서 흐름을 따릅니다. 블록 요소는 세로로 쌓이고 인라인 요소는 텍스트 안에서 가로로 흐릅니다. position 속성을 사용하면 이 흐름을 벗어나 오버레이, 고정 헤더, 도구 설명을 만들 수 있습니다.

모든 요소는 position: static으로 시작합니다. 이는 일반 문서 흐름에 따라 배치된다는 뜻입니다. top, right, bottom, left 속성은 정적 요소에 영향을 주지 않습니다.

position: relative는 요소를 일반 흐름에 유지하면서 top, right, bottom, left를 사용해 원래 위치에서 오프셋할 수 있게 합니다. 특히 절대 위치가 지정된 자손 요소를 위한 위치 지정 문맥을 만듭니다.

position: absolute는 요소를 일반 흐름에서 제외합니다. 요소는 가장 가까운 위치가 지정된 상위 요소(static이 아닌 모든 position 값)를 기준으로 배치됩니다. 위치가 지정된 상위 요소가 없으면 뷰포트를 기준으로 합니다.

위치가 지정된 요소는 서로 겹칠 수 있습니다. z-index를 사용해 쌓임 순서를 제어합니다. z-index 값이 높을수록 위에 표시됩니다. 위치가 지정된 요소에서만 작동하며(static에서는 작동하지 않음), 새로운 쌓임 맥락을 만듭니다.

position: fixed는 요소를 일반 흐름에서 제외하고 뷰포트에 고정합니다. 페이지와 함께 스크롤되지 않습니다. 고정 헤더, 플로팅 작업 버튼, 쿠키 배너에 적합합니다.

position: sticky는 두 방식이 결합된 형태입니다. 요소가 임계 지점(top/bottom으로 설정)에 도달할 때까지 페이지와 함께 스크롤되다가 그 지점에 고정됩니다. 긴 표의 섹션 헤더나 헤더를 지난 뒤 고정되는 사이드바에 유용합니다.

대표적인 기법은 position: absolute; top: 50%; left: 50%와 transform: translate(-50%, -50%)를 함께 사용해 위치가 지정된 부모 요소 안에서 요소를 정확히 가운데 정렬하는 것입니다.

절대 위치가 지정된 자식 요소는 기본적으로 부모 요소의 경계를 넘어설 수 있습니다. 부모 요소에 overflow: hidden을 추가하면 상자 바깥으로 나간 모든 부분이 잘립니다. 카드 이미지 효과와 배지 자르기에 유용합니다.

일부 속성은 의도치 않게 쌓임 맥락을 만듭니다. 예를 들어 transform, filter, isolation: isolate가 있습니다. 이로 인해 z-index 충돌이 발생할 수 있습니다. z-index가 9999인 요소라도 더 낮은 쌓임 맥락 안에 있으면 다른 요소 뒤에 표시될 수 있습니다.

relative: 오프셋과 위치 지정 기준. absolute: 부모 요소를 기준으로 배치하는 배지, 툴팁, 오버레이. fixed: 계속 표시되는 헤더, 모달, 토스트. sticky: 섹션 헤더, 스크롤을 따라오는 사이드바 탐색. 레이아웃에는 position을 사용하지 말고 Flex 또는 Grid를 사용하십시오.

static은 기본값입니다. relative는 일반 흐름을 벗어나지 않고 위치를 이동하며 위치 지정 기준을 만듭니다. absolute는 일반 흐름에서 벗어나 가장 가까운 위치가 지정된 상위 요소를 기준으로 배치됩니다. fixed는 뷰포트에 고정됩니다. sticky는 스크롤되다가 고정됩니다. 겹침 순서를 제어하려면 z-index를 사용하십시오.