position: fixed

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를 설정하면 요소는 새로운 쌓임 맥락(Stacking context)을 생성합니다. 즉, 일반적인 형제 요소(쌓임 맥락을 생성하지 않는 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

같이 보기