CSS position: sticky 완벽 정리

CSS의 position: sticky 속성은 스크롤할 때 특정 위치에 고정되는 효과를 줄 수 있는 강력한 기능입니다.

---

1. position: sticky란?

sticky는 relative와 fixed의 특징을 모두 가진 속성입니다.

• 기본적으로는 relative처럼 동작하지만,
• 특정 스크롤 지점에 도달하면 fixed처럼 고정됩니다.

이 속성은 요소가 부모 컨테이너 내에서만 고정된다는 특징이 있습니다.

2. position: sticky 사용법

기본 문법

.sticky-element {
  position: sticky;
  top: 10px; /* 스크롤 시 뷰포트 상단에서 10px 떨어진 위치에 고정 */
}

동작 방식

• top, bottom, left, right 중 하나 이상이 설정되어 있어야 작동합니다.
• 부모 요소의 범위를 벗어나지 않고, 해당 영역 내에서만 고정됩니다.

3. sticky 활용 예제

(1) 네비게이션 바 고정하기

<header class="sticky-header">내비게이션 바</header>
<section>긴 내용...</section>

.sticky-header {
  position: sticky;
  top: 0;
  background: white;
  padding: 10px;
  z-index: 1000;
}

✅ 효과: 내비게이션 바가 페이지 상단에 고정되어 스크롤해도 따라다닙니다.

(2) 테이블 헤더 고정

<table>
  <thead>
    <tr class="sticky-header">
      <th>이름</th>
      <th>나이</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>홍길동</td><td>30</td></tr>
    <tr><td>김철수</td><td>28</td></tr>
  </tbody>
</table>

.sticky-header {
  position: sticky;
  top: 0;
  background: lightgray;
}

✅ 효과: 테이블 헤더가 스크롤해도 화면 상단에 고정됩니다.

4. sticky가 동작하지 않을 때 체크할 것

✅ 부모 요소에 overflow: hidden이 설정되어 있는지 확인

.parent {
  overflow: hidden; /* 이 설정이 있으면 sticky가 동작하지 않음 */
}

✅ top, bottom, left, right 중 하나를 반드시 지정

.sticky-element {
  position: sticky;
  /* top 또는 다른 방향 속성을 설정해야 작동 */
  top: 0;
}

✅ 부모 요소 안에서만 sticky가 동작함 (뷰포트 기준이 아님)

5. 마무리

CSS의 sticky 속성은 네비게이션 바, 테이블 헤더, 사이드바 등의 UI를 만들 때 매우 유용한 기능입니다. 다만, 부모 요소의 overflow 설정과 위치 지정 속성(top, left 등)이 필수라는 점을 기억해야 합니다.