CSS position: absolute 완벽 가이드

`position: absolute`

position: absolute를 사용하면 특정 요소 영역을 기준으로 원하는 요소를 절대 위치에 배치할 수 있습니다.

position 속성의 absolute 값은
요소가 가장 가까운 위치 지정 조상 요소인 컨테이닝 블록(containing block)을 기준으로 하는 절대 위치를
top, bottom, left, right 속성의 값으로 적용하는 위치 지정 방식입니다.

이러한 위치 지정 방식을 Absolute positioning이라고 합니다.

Absolute positioning

position: absolute로 설정된 요소는 Absolute positioning을 설정하는데, 다음과 같은 특징이 있습니다.

컨테이닝 블록(containing block)

position: absolute로 설정된 요소는 컨테이닝 블록(containing block)을 기준으로 하는 절대 위치를 top, bottom, left, right 속성의 값으로 적용합니다. 컨테이닝 블록은 다음과 같이 결정됩니다.

컨테이닝 블록(containing block)은 가장 가까운 position 속성의 값이 relative, absolute, fixed, sticky인 조상 요소의 Padding box입니다.
만약 그런 조상 요소가 없다면 루트 요소(<html>)의 컨테이닝 블록(containing block)이 됩니다.
루트 요소의 컨테이닝 블록(containing block)은 다음과 같습니다.
- 연속적인 미디어(웹 브라우저 등)에서는 뷰포트(viewport) 크기와 동일합니다.
- 페이지 미디어(인쇄물 등)에서는 페이지 영역(page area)이 컨테이닝 블록(containing block)입니다.

Padding box는 요소에 대한 사각형 상자(Box model)에서 요소의 경계 테두리(border)를 제외한 패딩(padding)까지의 영역을 말합니다.

뷰포트(viewport)는 웹 브라우저 용어로, 현재 창(또는 전체 화면 모드로 문서를 보고 있는 경우 화면)에 표시되는 문서의 부분으로 웹 페이지가 보여지는 영역을 의미합니다.

하지만, 다음과 같은 상황에서는 position: absolute에서 컨테이닝 블록은 다음 중 하나를 갖는 가장 가까운 조상 요소의 padding box가 될 수도 있습니다.

filter 또는 backdrop-filter 또는 transform 또는 perspective 속성이 none이 아닌 값으로 설정된 요소
will-change 속성의 값이 filter 또는 backdrop-filter 또는 transform 또는 perspective인 값으로 설정된 요소
contain 속성의 값이 layout 또는 paint 또는 strict 또는 content 값으로 설정된 요소
content-visibility 속성의 값이 auto 값으로 설정된 요소

주의하세요!
브라우저마다 perspective와 filter 속성이 컨테이닝 블록(containing block) 형성에 기여하는 방식이 다를 수 있으므로, 특정 브라우저에서 예상과 다른 결과가 나타날 수 있습니다.

Absolute positioning의 레이아웃은 Absolute Positioning 레이아웃 모델(Layout Model)을 참조하세요!

Absolute Positioning 레이아웃 모델(Layout Model)

position: absolute로 설정된 요소는 다른 요소와의 관계에 따른 일반적인 문서 흐름(normal flow)에서 제거되고 페이지 레이아웃에서 요소에 대한 공간이 생성되지 않습니다. 이때 요소는 다른 요소와 겹칠 수도 있습니다.

요소에 position: absolute를 설정하면 z-index가 auto 값이더라도 요소는 새로운 쌓임 맥락(Stacking context)을 생성한 것처럼 구현됩니다. 즉, 일반적인 형제 요소(쌓임 맥락을 생성하지 않는 static 값인 형제 요소)보다 쌓임 순서가 높습니다.

위치 지정 속성

absolute에서 사용하는 위치 지정 속성
속성	설명
`top`	요소를 컨테이닝 블록(containing block)에서 아래로 이동시킵니다. (양수 길이 값: 아래, 음수 길이 값: 위) `auto` 값일 경우에는 `bottom` 속성 값에 따라 결정되며, `bottom` 속성도 `auto` 값이라면 요소는 이동하지 않습니다. 값을 지정하지 않으면 `auto` 값이 설정됩니다.
`bottom`	요소를 컨테이닝 블록(containing block)에서 위로 이동시킵니다. (양수 길이 값: 위, 음수 길이 값: 아래) `auto` 값일 경우에는 `top` 속성 값에 따라 결정되며, `top` 속성도 `auto` 값이라면 요소는 이동하지 않습니다. 값을 지정하지 않으면 `auto` 값이 설정됩니다.
`left`	요소를 컨테이닝 블록(containing block)에서 오른쪽으로 이동시킵니다. (양수 길이 값: 오른쪽, 음수 길이 값: 왼쪽) `auto` 값일 경우에는 `right` 속성 값에 따라 결정되며, `right` 속성도 `auto` 값이라면 요소는 이동하지 않습니다. 값을 지정하지 않으면 `auto` 값이 설정됩니다.
`right`	요소를 컨테이닝 블록(containing block)에서 왼쪽으로 이동시킵니다. (양수 길이 값: 왼쪽, 음수 길이 값: 오른쪽) `auto` 값일 경우에는 `left` 속성 값에 따라 결정되며, `left` 속성도 `auto` 값이라면 요소는 이동하지 않습니다. 값을 지정하지 않으면 `auto` 값이 설정됩니다.

absolute에서 사용하는 위치 지정 속성에서 지정하는 길이 값에는 백분율(%)을 사용할 수 있으며, top과 bottom 속성은 컨테이닝 블록(containing block)의 높이를 기준으로, left와 right 속성은 너비를 기준으로 이동시킵니다.

예제

HTML

<div class="container">
    <p>
        이 요소는 일반적인 문서 흐름(normal flow)에 따라 배치됩니다.
    </p>
    <div class="absolute">
        이 요소는 position: absolute가 설정되어 있으며,
        <br>
        일반적인 문서 흐름에서 제거됩니다.
    </div>
    <p>
        .absolute는 containing block(예: position: relative)된 조상 요소를 기준으로 배치됩니다.
        <br>
        top, bottom, left, right 속성을 사용하여 위치를 세부적으로 조정할 수 있습니다.
    </p>
</div>

CSS

.container {
    position: relative; /* .absolute의 기준(Containing Block)이 됨 */
    padding: 1em;
    background-color: beige;
}
.absolute {
    position: absolute;
    top: 0; /* .container의 맨 위에 배치 */
    right: 0; /* .container의 맨 오른쪽에 배치 */
    color: #fff;
    padding: 1em;
    background-color: rgba(204, 51, 255, 0.7);
    border: 3px solid #39004d;
}

`position: absolute`로 설정된 요소의 크기 계산 방식

position: absolute로 설정된 요소의 크기를 명시적으로 설정하지 않으면 어떻게 크기가 결정되는지에 대한 방식입니다.

`width`와 `height`

width(요소의 너비 지정 속성)나 height(요소의 높이 지정 속성)를 명시적으로 지정하지 않으면 초깃값인 auto가 적용됩니다. 이 경우, fit-content 크기가 적용되어 요소의 크기가 콘텐츠의 크기에 맞춰 결정됩니다.

fit-content 크기는
컨테이닝 블록(containing block)의 너비나 높이 레이아웃 제약을 고려하여, 요소의 크기를 min-content(콘텐츠가 차지할 수 있는 요소의 최소 크기 값)와 max-content(콘텐츠가 차지할 수 있는 최대한 이상적인 크기 값) 사이의 적합한 값으로 설정합니다.

다음의 예제로 확인해 보세요.

CSS

.container {
    position: relative; /* .absolute의 기준(Containing Block)이 됨 */
    height: 200px;
    background-color: beige;
}
.absolute { /* width: auto;  height: auto; */
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    background-color: rgba(204, 51, 255, 0.7);
    border: 3px solid #39004d;
}

다만, 다음의 두 가지 예외 상황에서는 다르게 적용됩니다.

`top`, `bottom`, `left`, `right` 속성의 영향을 받을 때

left 및 right가 모두 auto 값이 아닌 값으로 지정되면, 요소의 너비는 해당하는 두 위치의 너비 간격이 적용됩니다.
top 및 bottom이 모두 auto 값이 아닌 값으로 지정되면, 요소의 높이는 해당하는 두 위치의 높이 간격이 적용됩니다.

다음의 예제로 확인해 보세요.

CSS

.container {
    position: relative; /* .absolute의 기준(Containing Block)이 됨 */
    height: 200px;
    background-color: beige;
}
.absolute { /* width: auto;  height: auto; */
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 100px;
    color: #fff;
    background-color: rgba(204, 51, 255, 0.7);
    border: 3px solid #39004d;
}

`aspect-ratio`이 설정된 경우

aspect-ratio 속성은 요소 박스의 가로 세로 비율( 가로 / 세로 )을 설정합니다.

이 속성이 설정되어 있으면, 자동 크기 결정 시 비율이 적용된 축은 max-content로 계산됩니다.
만약 두 축 모두 자동 크기일 경우, 하나의 축이 auto이면 그 축은 비율에 맞게 max-content로 결정됩니다.

다음의 예제로 확인해 보세요.

CSS

.container {
    position: relative; /* .absolute의 기준(Containing Block)이 됨 */
    height: 200px;
    background-color: beige;
}
.absolute { /* width: auto;  height: auto; */
    position: absolute;
    top: 0;
    right: 0;
    aspect-ratio: 2 / 1; /* 가로 2 세로 1의 비율 */
    color: #fff;
    background-color: rgba(204, 51, 255, 0.7);
    border: 3px solid #39004d;
}

자동 최소 크기(`min-width`와 `min-height`)

min-width(요소의 최소 너비 지정 속성)나 min-height(요소의 최소 높이 지정 속성)를 명시적으로 지정하지 않으면 초깃값인 auto가 되는데, 이 값은 0이 적용됩니다.

`position: absolute`로 설정된 요소의 마진(바같쪽 여백) 크기 계산 방식

position: absolute로 설정된 요소의 마진(바같쪽 여백, margin area) 크기 계산 방식입니다.

`auto` 값

position: absolute로 설정된 요소의 마진(바같쪽 여백, margin area) auto 값 계산 방식
`margin-top: auto`	`top` 또는 `bottom` 또는 `height` 속성 값 중 하나라도 `auto`가 있으면 `0` 값으로 적용됩니다. 그렇지 않으면 사용될 위쪽 공간은 `bottom`으로 지정된 위치까지의 여백 크기로 자동으로 계산해서 설정합니다.
`margin-bottom: auto`	`top` 또는 `bottom` 또는 `height` 속성 값 중 하나라도 `auto`가 있으면 `0` 값으로 적용됩니다. 그렇지 않으면 사용될 아래쪽 공간은 `top`으로 지정된 위치까지의 여백 크기로 자동으로 계산해서 설정합니다.
`margin-left: auto`	`left` 또는 `right` 또는 `width` 속성 값 중 하나라도 `auto`가 있으면 `0` 값으로 적용됩니다. 그렇지 않으면 사용될 왼쪽 공간은 `right`로 지정된 위치까지의 여백 크기로 자동으로 계산해서 설정합니다.
`margin-right: auto`	`left` 또는 `right` 또는 `width` 속성 값 중 하나라도 `auto`가 있으면 `0` 값으로 적용됩니다. 그렇지 않으면 사용될 오른쪽 공간은 `left`로 지정된 위치까지의 여백 크기로 자동으로 계산해서 설정합니다.

다음의 예제로 확인해 보세요.

CSS

.container {
    position: relative; /* .absolute의 기준(Containing Block)이 됨 */
    height: 200px;
    background-color: beige;
}
.absolute {
    position: absolute;
    left: 0;
    right: 100px;
    width: 100px;
    margin-left: auto;
    color: #fff;
    background-color: rgba(204, 51, 255, 0.7);
    border: 3px solid #39004d;
}

이 예제는 position: absolute로 설정된 요소에 margin-left: auto를 설정하는 예제입니다.

position: absolute로 설정된 요소에 margin-left: auto를 설정하려면 left 또는 right 또는 width 속성 값 중 하나라도 auto가 있으면0으로 계산되기 때문에 모두 auto가 아닌 값으로 지정했습니다. 아래의 margin-left: auto가 실제로 적용된 모습을 보면, 사용될 왼쪽 공간은 right로 지정한 100px 위치까지의 여백 크기로 자동으로 계산해서 설정된 것을 알 수 있습니다.

`<길이>` 단위 값

양수, 0, 음수가 가능합니다.

`<백분율(%)>` 단위 값

컨테이닝 블록(containing block)의 너비에 대한 백분율로 정의합니다. (양수, 0, 음수가 가능합니다.)

`position: absolute`로 설정된 요소의 `float` 속성의 계산된 값

position: absolute로 설정된 요소에서 float 속성의 계산된 값은 none이 적용됩니다. 즉, float 속성이 적용되지 않습니다.

브라우저 호환성

position 속성과 absolute 값의 브라우저 호환성
속성과 값	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`position`	1	12	1	1
`absolute`	1	12	1	1
position: absolute가 적용된 flex 컨테이너의 자식 요소(position: Absolutely-positioned flex children)	52	12	52	11

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

position: absolute의 명세서 사양
명세서 사양
`position`	CSS Positioned Layout Module Level 3 #position-property
`position: absolute`	CSS Positioned Layout Module Level 3 #valdef-position-absolute
Absolute Positioning Layout Model	CSS Positioned Layout Module Level 3 #abspos-layout

position: absolute

Absolute positioning

컨테이닝 블록(containing block)

Absolute Positioning 레이아웃 모델(Layout Model)

위치 지정 속성

예제

position: absolute로 설정된 요소의 크기 계산 방식

width와 height

top, bottom, left, right 속성의 영향을 받을 때

aspect-ratio이 설정된 경우

자동 최소 크기(min-width와 min-height)

position: absolute로 설정된 요소의 마진(바같쪽 여백) 크기 계산 방식

auto 값

<길이> 단위 값

<백분율(%)> 단위 값

position: absolute로 설정된 요소의 float 속성의 계산된 값

브라우저 호환성

명세서

같이 보기

`position: absolute`

`position: absolute`로 설정된 요소의 크기 계산 방식

`width`와 `height`

`top`, `bottom`, `left`, `right` 속성의 영향을 받을 때

`aspect-ratio`이 설정된 경우

자동 최소 크기(`min-width`와 `min-height`)

`position: absolute`로 설정된 요소의 마진(바같쪽 여백) 크기 계산 방식

`auto` 값

`<길이>` 단위 값

`<백분율(%)>` 단위 값

`position: absolute`로 설정된 요소의 `float` 속성의 계산된 값