절대 위치 지정과 포함 블록

절대적으로 배치된 요소는 일반 문서 흐름에서 제외됩니다. 다른 요소는 해당 요소가 존재하지 않는 것처럼 동작합니다. 절대 요소는 가장 가까운 위치 지정 조상 요소를 기준으로 배치됩니다.

절대적으로 배치된 요소의 포함 블록은 position 값이 static이 아닌 가장 가까운 조상 요소입니다. 그런 조상 요소가 없으면 해당 요소는 초기 포함 블록(뷰포트)을 기준으로 배치됩니다.

가장 일반적인 패턴은 부모 요소에 position: relative를 추가하여 절대적으로 배치된 자식 요소를 포함하는 것입니다.

절대적 배치에서는 top/right/bottom/left가 포함 블록의 안쪽 여백 가장자리를 기준으로 측정됩니다.

절대 요소를 가운데 정렬하는 전형적인 기법은 다음과 같습니다:

절대적으로 배치된 요소는 기본적으로 콘텐츠에 맞게 줄어듭니다(width/height가 설정되지 않은 경우). 블록 요소처럼 컨테이너의 전체 너비로 늘어나지 않습니다.

네 가장자리를 모두 0으로 설정하면 절대적으로 배치된 요소가 포함 블록을 가득 채우도록 늘어납니다:

inset 속성은 top, right, bottom, left를 한꺼번에 지정하는 단축 속성입니다:

절대적으로 배치된 요소는 쌓임 맥락에 참여합니다. 겹치는 절대 요소 중 어느 요소를 위에 표시할지 제어하려면 z-index를 사용합니다.

부모 요소에 position: relative를 추가하지 않으면 절대 자식 요소는 가장 가까운 위치 지정 조상 요소를 기준으로 배치되며, 그 조상 요소가 뷰포트인 경우가 많습니다. 항상 포함 블록을 확인합니다.

Flex 또는 Grid 컨테이너는 자동으로 위치가 지정된 요소가 되지 않습니다. 절대 자식 요소의 포함 블록으로 만들려면 여전히 position: relative를 명시적으로 추가해야 합니다.

조상 요소 중 position이 static이 아닌 요소가 하나도 없다면 절대적으로 배치된 요소는 어디에 배치됩니까?

절대적으로 배치된 요소는 문서 흐름에서 벗어나 가장 가까운 static이 아닌 조상 요소를 기준으로 배치됩니다. 배치를 제어하려면 항상 부모 요소에 position: relative를 추가합니다. 절대 요소가 컨테이너를 가득 채우도록 늘리려면 inset: 0을 사용합니다.