이 편에서 만드는 파일

web-practice/portfolio/
└ css/
  └ styles.css   ~ (.site-header에 position: sticky 추가)

개념 정리

position 속성은 요소를 문서의 기본 흐름에서 어떻게 빼낼지 결정합니다.

지금 헤더는 position을 지정하지 않아 기본값 static입니다. 페이지를 스크롤하면 헤더도 본문과 함께 위로 밀려 사라집니다. sticky로 바꾸면 스크롤이 헤더의 원래 위치를 지날 때까지는 relative처럼 흐르다가, 그 지점부터는 top: 0에 붙어 고정됩니다.

sticky가 작동하려면 두 조건이 필요합니다.

1. top(또는 bottom/left/right) 중 최소 하나에 구체적인 값을 지정해야 합니다. 값이 없으면 언제 고정할지 브라우저가 판단할 기준이 없습니다.
2. 조상 요소 중 어느 하나라도 overflow: hidden(또는 auto/scroll)이 걸려 있으면 그 조상 안에서만 sticky가 작동하거나, 아예 동작을 멈춥니다.

헤더가 고정된 뒤에는 본문 콘텐츠가 스크롤을 통해 헤더 위로 올라올 수 있습니다. 헤더가 항상 맨 위에 보이도록 z-index로 쌓임 순서를 지정합니다. z-index는 값이 클수록 위에 쌓이며, 지금은 헤더 하나만 고려하므로 작은 양수(예: 10) 정도면 충분합니다.

자주 하는 오해: sticky를 fixed와 혼동하기 쉽지만, fixed는 처음부터 항상 화면에 고정되어 스크롤 위치와 무관하게 같은 자리에 있습니다. 반면 sticky는 원래 자리를 지나야 고정되기 시작합니다. 지금 헤더는 페이지 맨 위에 있으므로 두 값의 차이가 잘 안 보이지만, 페이지 중간에 있는 요소라면 확실히 다르게 동작합니다.

실습

/* css/styles.css (.site-header 규칙에 추가) */
.site-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-6);
  height: var(--header-height);
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

직접 해보기

1. top: 0을 지워 보고 헤더가 더 이상 고정되지 않는지 확인한 뒤 되돌립니다.
2. position: sticky를 position: fixed로 잠깐 바꿔 봅니다. 헤더는 여전히 고정되지만 본문 맨 위 내용이 헤더 뒤에 가려 시작되는 문제가 생기는지 확인하고, 그 이유(fixed는 흐름에서 완전히 빠져 본문이 그 자리를 대신 차지하기 때문)를 이해한 뒤 sticky로 되돌립니다.

자주 하는 실수

확인 문제

참고 자료

• MDN — position