position 속성의 이해

position 속성은
요소의 위치 지정 방식을 설정합니다.

이 속성은 static, relative, absolute, fixed, sticky 값 중 하나를 선택해 설정할 수 있으며, 선택한 값에 따라 요소의 위치 지정 방식이 달라집니다.

형식 구문

CSS 
selector {
    position: static | relative | absolute | fixed | sticky
}

구문

CSS 
/* 키워드 값 */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* 전역 값 */
position: inherit;
position: initial;
position: revert;
position: revert-layer;
position: unset;

값

position 속성은 다음의 키워드 값에 따라 요소의 위치 지정 방식이 달라집니다.

위치 지정 방식을 설정한 후에는 top, bottom, left, right 속성을 사용하여 요소의 위치를 세부적으로 조정할 수 있습니다.

static

초깃값입니다.
요소가 다른 요소와의 관계에 따라 일반적인 문서 흐름(normal flow)에 따라 배치되는 방식입니다.

이 값으로 position 속성을 설정하면 top, bottom, left, right 속성으로 요소의 위치를 세부적으로 적용할 수 없는 정적인(static) 위치 지정 방식입니다.

position: static으로 설정된 요소는
top, bottom, left, right 속성과 z-index 속성이 적용되지 않습니다.
단, position: static으로 설정되었더라도 플렉스 박스나 그리드 박스의 아이템인 요소는 z-index 속성이 적용됩니다.

예제
HTML 
<p>
    position: static;은 요소에 position 속성을 지정하지 않았을 때 초깃값으로
    설정되는 값입니다.
</p>
<p class="static">
    이 요소는 position: static;으로 설정되어 있습니다.
    <br>
    요소가 다른 요소와의 관계에 의해 일반적인 문서 흐름(normal flow)에 따라 배치됩니다.
</p>
<p>
    position이 static으로 설정된 요소는
    <br>
    top, bottom, left, right 속성과 z-index 속성이 효과가 없습니다.
</p>
CSS 
.static {
    position: static; /* 초깃값 */
    border: 3px solid yellowgreen;
}
실제 적용된 모습

relative

position: relative를 사용하면 요소 자체를 기준으로 요소를 원하는 위치로 배치할 수 있습니다.

position 속성의 relative 값은 요소가 문서의 일반적인 흐름에 따라 배치되는 자체 영역을 기준으로 하는 상대적인 간격을
top, bottom, left, right 속성의 값으로 적용하는 위치 지정 방식입니다.

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

Relative positioning

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

  • 요소가 position: static 값처럼 문서의 일반적인 흐름에 따라 배치된 다음, 상대적인 간격(offset, 오프셋)을 top, bottom, left, right 속성의 값으로 적용합니다.
  • 간격의 조정은 순전히 시각적 효과이며, 페이지 레이아웃에서 요소에 주어진 공간은 static 값일 때와 동일합니다.
  • 만약, 이 요소를 감싸고 있는 컨테이너의 overflow 속성 값에 따라 내용이 컨터이너의 경계를 넘어가면 그 내용은 컨테이너(또는 해당 요소)의 영역을 벗어나게 되어 스크롤바가 생기는 등의 레이아웃에 영향을 줄 수 있습니다.
  • z-index가 auto 값이더라도 요소는 새로운 쌓임 맥락(Stacking context)을 생성한 것처럼 구현됩니다. 즉, 일반적인 형제 요소(쌓임 맥락을 생성하지 않는 static 값인 형제 요소)보다 쌓임 순서가 높습니다. 단, 테이블 내부를 구성하는 요소들(<thead>, <tbody>, <tfoot> 같은 테이블 그룹 요소나 <tr> 요소와 <caption> 및 <td>, <th>)에 대한 효과는 명세서에서 정의하고 있지 않습니다.
relative에서 사용하는 간격(offset, 오프셋) 지정 속성
relative에서 사용하는 간격(offset, 오프셋) 지정 속성
속성설명
top 요소를 원래 위치에서 위쪽 간격을 지정합니다. (양수 길이 값: 안쪽, 음수 길이 값: 바깥쪽)
auto 값일 경우에는 bottom 속성 값에 따라 결정되며, bottom 속성도 auto 값이라면 요소의 위쪽과 아래쪽 간격은 지정되지 않습니다. 값을 지정하지 않으면 auto 값이 설정됩니다.
bottom 요소를 원래 위치에서 아래쪽 간격을 지정합니다. (양수 길이 값: 안쪽, 음수 길이 값: 바깥쪽)
auto 값일 경우에는 top 속성 값에 따라 결정되며, top 속성도 auto 값이라면 요소의 위쪽과 아래쪽 간격은 지정되지 않습니다. 값을 지정하지 않으면 auto 값이 설정됩니다.
left 요소를 원래 위치에서 왼쪽 간격을 지정합니다. (양수 길이 값: 안쪽, 음수 길이 값: 바깥쪽)
auto 값일 경우에는 right 속성 값에 따라 결정되며, right 속성도 auto 값이라면 요소의 왼쪽과 오른쪽 간격은 지정되지 않습니다. 값을 지정하지 않으면 auto 값이 설정됩니다.
right 요소를 원래 위치에서 오른쪽 간격을 지정합니다. (양수 길이 값: 안쪽, 음수 길이 값: 바깥쪽)
auto 값일 경우에는 left 속성 값에 따라 결정되며, left 속성도 auto 값이라면 요소의 왼쪽과 오른쪽 간격은 지정되지 않습니다. 값을 지정하지 않으면 auto 값이 설정됩니다.

relative에서 사용하는 간격(offset, 오프셋) 지정 속성에서 지정하는 길이 값에는 백분율(%)을 사용할 수 있으며,
top과 bottom 속성은 컨테이닝 블록(containing block)의 높이를 기준으로, left와 right 속성은 너비를 기준으로 간격을 지정합니다.

예제
HTML 
<p>
    position: relative;는 static 값처럼 다른 요소와의 관계에 따라 일반적인 문서 흐름(normal flow)에 따라 배치됩니다.
</p>
<p class="relative">
    이 요소는 position: relative;로 설정되어 있습니다.
    <br>
    요소가 다른 요소와의 관계에 의해 일반적인 문서 흐름(normal flow)에 따라 배치됩니다.
</p>
<p>
    하지만, 원래 배치된 위치를 기준으로
    <br>
    top, bottom, left, right 속성으로 상대적인 간격(offset, 오프셋)을 적용하는 방식입니다.
</p>
CSS 
.relative {
    position: relative;
    left: 40px; /* 왼쪽에 40px의 간격(offset, 오프셋)을 적용 */
    border: 3px solid yellowgreen;
}
실제 적용된 모습

relative 값에 대한 자세한 설명과 더 많은 예제는 CSS position: relative 완벽 가이드를 참조하세요!

absolute

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

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

이 위치 지정 방식을 absolute positioning이라고 합니다. absolute positioning은 Absolute Positioning 레이아웃 모델(Layout Model)을 참조하세요!

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

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

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

absolute에서 컨테이닝 블록(containing block)

absolute에서 Containing Block이란
position: absolute로 설정된 요소의 위치를 지정하는 기준이 되는 부모 요소 또는 조상 요소를 말합니다.

  • 컨테이닝 블록(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)는 웹 브라우저 용어로, 현재 창(또는 전체 화면 모드로 문서를 보고 있는 경우 화면)에 표시되는 문서의 부분으로 웹 페이지가 보여지는 영역을 의미합니다.

하지만, 다음과 같은 상황에서는 absolute에서 containing block은 다음 중 하나를 갖는 가장 가까운 조상 요소의 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에서 사용하는 위치 지정 속성
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의 맨 위에 배치 */
    left: 40px; /* .container의 왼쪽에서 40px 이동 */
    width: 50%; /* .container 너비의 50% */
    color: #fff;
    padding: 1em;
    background-color: rgba(204, 51, 255, 0.7);
    border: 3px solid #39004d;
}
실제 적용된 모습

absolute 값에 대한 자세한 설명과 더 많은 예제는 CSS position: absolute 완벽 가이드를 참조하세요!

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 속성을 사용해 위치를 지정하는 방식을 말하는데, 다음과 같은 특징이 있습니다.

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

요소에 position: fixed를 설정하면 요소는 새로운 쌓임 맥락(Stacking context)을 생성합니다. 즉, 일반적인 형제 요소(쌓임 맥락을 생성하지 않는 static 값인 형제 요소)보다 쌓임 순서가 높습니다.

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

fixed에서 사용하는 위치 지정 속성은 다음의 표와 같습니다.

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;
}
실제로 적용된 모습 확인하기

fixed 값에 대한 자세한 설명과 더 많은 예제는 CSS position: fixed 완벽 가이드를 참조하세요!

sticky

position: sticky를 사용하면 스크롤 영역 기준으로 스크롤링할 때 요소를 고정 배치할 수 있습니다.

position 속성의 sticky 값은 요소가 가장 가까운 스크롤 가능한 조상 요소의 스크롤 시 보여지는 영역을 기준으로,
지정된 위치에 달라붙듯이(sticky) 고정되도록 하는 위치 지정 방식입니다.

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

Sticky positioning

요소가 다른 요소와의 관계에 따른 일반적인 문서 흐름(normal flow)에 따라 배치되지만,
요소의 컨테이닝 블록(containing block)인 가장 가까운 조상 블록 레벨 요소 영역이
가장 가까운 조상 scroll container(스크롤 영역)의 scrollport(스크롤 가능한 오버플로 영역을 시각적으로 볼 수 있는 곳) 기준으로 top, bottom, left, right 속성 값으로 지정한 임계점(specified threshold) 위치에 도달하면 마치 position: fixed처럼 해당 위치에서 고정됩니다. 고정 상태는 컨테이닝 블록의 반대편 가장자리를 만나면 해제됩니다. 지정된 임계점 위치에 도달되기 이전은 position: relative로 배치됩니다.

이때 요소는 다음과 같은 특징이 있습니다.

  • 다른 요소의 위치를 변경하지 않으며, 원래 자리에 공간을 유지합니다.
  • 다른 요소와 겹칠 수도 있습니다. 요소에 position: sticky를 설정하면 요소는 새로운 쌓임 맥락(Stacking context)을 생성합니다. 즉, 일반적인 형제 요소(쌓임 맥락을 생성하지 않는 static 값인 형제 요소)보다 쌓임 순서가 높습니다.
sticky positioning이 작동하려면
  • 임계점 위치를 지정하는 top, bottom, left, right 속성 값 중 적어도 하나는 auto가 아닌 값으로 지정되어 있어야 합니다.
  • 스크롤이 가능한 조상 요소(scrollport)의 영역 내에 sticky가 설정된 요소가 있어야 합니다.
  • 단, 가장 가까운 스크롤이 가능한 조상 요소(scrollport)의 자손이면서 sticky가 설정된 요소의 조상 사이의 요소에는 overflow 속성의 값이 auto, scroll 및 scroll 및 hidden으로 설정되어 있지 않아야 합니다.
sticky에서 사용하는 임계점(specified threshold) 위치 지정 속성
sticky에서 사용하는 임계점(specified threshold) 위치 지정 속성
속성설명
top 요소의 컨테이닝 블록(containing block)이 가장 가까운 조상 scrollport(스크롤 가능한 오버플로 영역을 시각적으로 볼 수 있는 곳)의 Padding box를 기준으로 위쪽에서 고정될 임계점 위치를 지정합니다. (양수 길이 값: 위, 음수 길이 값: 아래) auto 값일 경우, 임계점 위치가 설정되지 않습니다. 값을 지정하지 않으면 auto 값이 설정됩니다.
bottom 요소의 컨테이닝 블록(containing block)이 가장 가까운 조상 scrollport(스크롤 가능한 오버플로 영역을 시각적으로 볼 수 있는 곳)의 Padding box를 기준으로 아래쪽에서 고정될 임계점 위치를 지정합니다. (양수 길이 값: 아래, 음수 길이 값: 위) auto 값일 경우, 임계점 위치가 설정되지 않습니다. 값을 지정하지 않으면 auto 값이 설정됩니다.
left 요소의 컨테이닝 블록(containing block)이 가장 가까운 조상 scrollport(스크롤 가능한 오버플로 영역을 시각적으로 볼 수 있는 곳)의 Padding box를 기준으로 왼쪽에서 고정될 임계점 위치를 지정합니다. (양수 길이 값: 왼쪽, 음수 길이 값: 오른쪽) auto 값일 경우, 임계점 위치가 설정되지 않습니다. 값을 지정하지 않으면 auto 값이 설정됩니다.
right 요소의 컨테이닝 블록(containing block)이 가장 가까운 조상 scrollport(스크롤 가능한 오버플로 영역을 시각적으로 볼 수 있는 곳)의 Padding box 기준으로 오른쪽에서 고정될 임계점 위치를 지정합니다. (양수 길이 값: 오른쪽, 음수 길이 값: 왼쪽) auto 값일 경우, 임계점 위치가 설정되지 않습니다. 값을 지정하지 않으면 auto 값이 설정됩니다.

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

sticky에서 사용하는 임계점 위치 지정 속성에서 지정하는 길이 값에는 백분율(%)을 사용할 수 있으며, top과 bottom 속성은 가가장 가까운 조상 scrollport(스크롤 가능한 오버플로 영역을 시각적으로 볼 수 있는 곳)의 높이 기준으로, left와 right 속성은 너비를 기준으로 임계점 위치를 지정합니다.

예제
HTML 
<div class="container">
    <section>
        <p>sticky positioning을 구현하는 예제입니다.</p>
        <p class="sticky">sticky 문단입니다.</p>
        <p>다른 요소와 겹칠 수도 있습니다.</p>

    </section>
    <section>
        <p>sticky positioning을 구현하는 예제입니다.</p>
        <p class="sticky">sticky 문단입니다.</p>
        <p>다른 요소와 겹칠 수도 있습니다.</p>
    </section>
    <section>
        <p>sticky positioning을 구현하는 예제입니다.</p>
        <p class="sticky">sticky 문단입니다.</p>
        <p>다른 요소와 겹칠 수도 있습니다.</p>
    </section>
    <section>
        <p>sticky positioning을 구현하는 예제입니다.</p>
        <p class="sticky">sticky 문단입니다.</p>
        <p>다른 요소와 겹칠 수도 있습니다.</p>
    </section>
</div>
CSS 
.container { /* 스크롤 가능한 오버플로 영역 */
    overflow: auto;
    height: 300px;
    border: 5px solid red;
}
section { /* 가장 가까운 스크롤이 가능한 조상 요소(scrollport) */
    background-color: beige;
    height: 400px;
}
section + section {
    margin-top: 2em;
}
p {
    margin: 0;
}
.sticky {
    position: sticky;
    top: 0;
    color: #fff;
    padding: 1em;
    background-color: rgba(204, 51, 255, 0.7);
    border: 3px solid #39004d;
}
실제 적용된 모습 스크롤되는 영역을 스크롤해 보세요!

fixed 값에 대한 더 많은 예제는 CSS position: sticky 완벽 가이드를 참조하세요!

형식 정의

list-style-type 속성의 형식 정의
초깃값 static
적용 요소 table-column-group(<colgroup>) 및 table-column(<col>)를 제외한 모든 요소
상속 아니오
애니메이션 아니오
position 속성과 static, relative 값의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
position 1 12 1 1
static 1 12 1 1
relative 1 12 1 1
absolute 1 12 1 1
position: absolute가 적용된 flex 컨테이너의 자식 요소(position: Absolutely-positioned flex children) 52 12 52 11
fixed 1 12 1 1
sticky 56 16 59 13

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

명세서

position 속성의 명세서 사양
명세서 사양
position CSS Positioned Layout Module Level 3
#position-property
Relative Positioning CSS Positioned Layout Module Level 3
#relpos-insets
Absolute Positioning Layout Model CSS Positioned Layout Module Level 3
#abspos-layout
Sticky positioning CSS Positioned Layout Module Level 3
#stickypos-insets
Scrollable Overflow CSS Positioned Layout Module Level 3
#scrollable

참고문헌

같이 보기