position: fixed

position 속성의 fixed 값은
루트 요소(<html>)의 컨테이닝 블록(containing block)을 기준으로
top, bottom, left, right 속성을 사용해 요소의 고정된 위치를 지정하는 방식입니다.

알아두세요!
앞으로 설명하겠지만, 브라우저에서 루트 요소(<html>)의 컨테이닝 블록(containing block)은 뷰포트(viewport) 크기와 동일합니다.
그래서, 일반적으로 position: fixed은 뷰포트(viewport)를 기준으로 고정 위치를 지정하기 위해 사용됩니다.

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

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

Fixed positioning

position: fixed로 설정된 요소는 루트 요소(<html>)의 컨테이닝 블록(containing block)을 기준으로 top, bottom, left, right 속성을 사용해 위치를 지정하는 방식을 말하는데, 다음과 같은 특징이 있습니다.

루트 요소(<html>)의 컨테이닝 블록(containing block)

  • 연속적인 미디어(웹 브라우저 등)에서는 뷰포트(viewport) 크기와 동일합니다.
  • 페이지 미디어(인쇄물 등)에서는 페이지 영역(page area)입니다.

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

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

  • 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) 형성에 기여하는 방식이 다를 수 있으므로, 특정 브라우저에서 예상과 다른 결과가 나타날 수 있습니다.

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

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

위치 지정 속성

fixed에서 사용하는 위치 지정 속성
속성설명
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 값이 설정됩니다.

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

예제
HTML 
<body>
    <div class="outer">
        <p>
            fixed box는 뷰포트에 고정되어
            스크롤을 하더라도 그 위치에 그대로 있습니다.
        </p>
        <div class="fixed-box">fixed box</div>
    </div>
</body>
CSS 
body {
    height: 5000px;
    margin: 0;
}
.outer {
    height: 100%;
    margin-left: 150px;
    background-color: gold;
    padding: 1em;
}
.fixed-box {
    position: fixed;  /* 뷰포트가 Containing Block이 됨 */
    top: 100px; /* 뷰포트 기준 아래로 100px 이동 */
    left: 25px; /* 뷰포트 기준 오른쪽으로 25px 이동 */
    width: 100px;
    height: 100px;
    background-color: red;
}
실제로 적용된 모습 확인하기

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

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

width와 height

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

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

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

HTML 
<body>
    <div class="fixed">요소의 크기가 콘텐츠의 크기에 맞춰 결정</div>
</body>
CSS 
body {
    height: 5000px;
    margin: 0;
}
.fixed { /* width: auto;  height: auto; */
    position: fixed;
    top: 0;
    left: 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 값이 아닌 값으로 지정되면, 요소의 높이는 해당하는 두 위치의 높이 간격이 적용됩니다.

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

HTML 
<body>
    <div class="fixed">top, bottom, left, right 속성의 영향을 받을 때</div>
</body>
CSS 
body {
    height: 5000px;
    margin: 0;
}
.fixed { /* width: auto;  height: auto; */
    position: fixed;
    top: 0;
    bottom: 100px;
    left: 0;
    right: 100px;
    color: #fff;
    background-color: rgba(204, 51, 255, 0.7);
    border: 3px solid #39004d;
}
실제로 적용된 모습 확인하기
aspect-ratio이 설정된 경우

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

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

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

HTML 
<body>
    <div class="fixed">aspect-ratio이 설정된 경우</div>
</body>
CSS 
body {
    height: 5000px;
    margin: 0;
}
.fixed { /* width: auto;  height: auto; */
    position: fixed;
    top: 0;
    left: 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: fixed로 설정된 요소의 마진(바같쪽 여백) 크기 계산 방식

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

auto 값

position: fixed로 설정된 요소의 마진(바같쪽 여백, 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로 지정된 위치까지의 여백 크기로 자동으로 계산해서 설정합니다.

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

HTML 
<body>
    <div class="fixed">margin-left: auto;가 설정된 경우</div>
</body>
CSS 
body {
    height: 5000px;
    margin: 0;
}
.fixed {
    position: fixed;
    left: 0;
    right: 100px;
    width: 100px;
    margin-left: auto;
    color: #fff;
    background-color: rgba(204, 51, 255, 0.7);
    border: 3px solid #39004d;
}
실제로 적용된 모습 확인하기

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

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

<길이> 단위 값

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

<백분율(%)> 단위 값

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

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

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

position 속성과 fixed 값의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
position 1 12 1 1
fixed 1 12 1 1

명세서

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

같이 보기