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를 설정하면 z-index가 auto 값이더라도 요소는 새로운 쌓임 맥락(Stacking context)을 생성한 것처럼 구현됩니다. 즉, 일반적인 형제 요소(position: 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 속성은 너비를 기준으로 임계점 위치를 지정합니다.

예제

position: sticky 구현에 대한 다양한 예제를 살펴보세요!

일반적인 예제

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;
}
실제 적용된 모습 스크롤되는 영역을 스크롤해 보세요!

X축(가로) 스크롤에 적용하는 예제

HTML 
<section class="container">
    <div class="sticky-header">고정된 헤더</div>
    <div class="content">
        스크롤할 수 있는 길이가 긴 콘텐츠입니다.
        <br>
        X축(가로)으로 이 내용을 스크롤 해주세요.
    </div>
</section>
CSS 
.container {
    width: 100%;
    overflow-x: auto;  /* 가로 스크롤 활성화 */
    display: flex;
    background: linear-gradient(to right, #f2f2f2, #777);
}
.content {
    width: 150vw; /* 내용이 너무 길어서 스크롤이 생기도록 설정 */
    padding: 1em;
    flex: none;
    color: blue;
}
.sticky-header {
    position: sticky;
    left: 0; /* X축에서 고정될 위치 */
    background: coral;
    color: #fff;
    padding: 1em;
    background-color: rgba(204, 51, 255, 0.7);
    border: 3px solid #39004d;
}
실제 적용된 모습

테이블 헤더에 적용하는 예제

HTML 
<section>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>이름</th>
                <th>직업</th>
                <th>나이</th>
                <th>국가</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>개발자</td>
                <td>28</td>
                <td>한국</td>
            </tr>
            <tr>
                <td>2</td>
                <td>김철수</td>
                <td>디자이너</td>
                <td>30</td>
                <td>미국</td>
            </tr>
            <tr>
                <td>3</td>
                <td>박지은</td>
                <td>PM</td>
                <td>35</td>
                <td>영국</td>
            </tr>
            <tr>
                <td>4</td>
                <td>이순신</td>
                <td>분석가</td>
                <td>40</td>
                <td>일본</td>
            </tr>
            <tr>
                <td>5</td>
                <td>최수정</td>
                <td>마케터</td>
                <td>25</td>
                <td>캐나다</td>
            </tr>
        </tbody>
    </table>
</section>
CSS 
section {
    height: 270px;
    overflow: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
}
thead {
    position: sticky;
    top: 0;
    color: #fff;
    background-color: rgba(204, 51, 255, 0.8);
    
}
th, td {
    padding: 30px 10px;
    text-align: center;
}
실제 적용된 모습

알아두세요!
position 속성은 table-column-group(<colgroup>) 및 table-column(<col>)에 적용되지 않으므로, 해당하는 요소들은 position: sticky에 영향을 받지 않습니다.

position 속성과 sticky 값의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
position 1 12 1 1
sticky 56 16 59 13

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

명세서

position: fixed의 명세서 사양
명세서 사양
position CSS Positioned Layout Module Level 3
#position-property
position: sticky CSS Positioned Layout Module Level 3
#valdef-position-sticky
Sticky positioning CSS Positioned Layout Module Level 3
#stickypos-insets
Scrollable Overflow CSS Positioned Layout Module Level 3
#scrollable

같이 보기