Positioning

김동현·2026년 3월 18일

mdn 학습 번역 - CSS

목록 보기

25/190

안녕하세요! 프론트엔드 개발의 꽃, 화면의 요소들을 내 마음대로 자유자재로 띄우고 고정할 수 있는 포지셔닝(Positioning)의 세계로 오신 것을 환영합니다!

웹 개발을 하다 보면 팝업창을 띄우거나, 스크롤을 내려도 상단에 딱 달라붙어 있는 메뉴를 만들어야 할 때가 무조건 옵니다. 이때 사용하는 것이 바로 CSS의 position 속성이에요. 이번 레슨을 완벽히 이해하시면 더 이상 요소 배치가 두렵지 않으실 겁니다. 공식 문서의 내용을 꼼꼼히 살펴보며 현업 꿀팁까지 듬뿍 전수해 드릴게요!

포지셔닝 (Positioning)

이전 페이지 (Test your skills: Floats) | 개요: CSS 레이아웃 | 다음 페이지 (Test your skills: Position)

포지셔닝(Positioning)을 사용하면 요소들을 정상적인 문서 흐름(normal document flow)에서 빼내어 다르게 동작하도록 만들 수 있습니다. 예를 들면, 요소들을 서로 겹치게 만들거나 브라우저 뷰포트(화면) 안의 똑같은 위치에 항상 고정시켜 둘 수 있죠. 이 글에서는 다양한 position 값들과 그 사용법을 설명합니다.

사전 준비 지식: HTML로 콘텐츠 구조화하기, CSS 스타일링 기초, 기본 텍스트 및 폰트 스타일링, CSS 레이아웃 기초 개념에 대한 친숙함.


사전 준비 지식:	HTML로 콘텐츠 구조화하기, CSS 스타일링 기초, 기본 텍스트 및 폰트 스타일링, CSS 레이아웃 기초 개념에 대한 친숙함.
학습 목표:	`static` 포지셔닝이 페이지에 요소가 배치되는 '기본값'임을 알기. 상대적으로 포지셔닝된(relatively positioned) 요소는 정상 흐름 안에 남아있지만, 절대(absolute) 및 고정(fixed)/스티키(sticky) 포지셔닝은 요소를 정상 흐름에서 완전히 빼내어 분리된 레이어에 배치한다는 것 이해하기. 최종 레이아웃 위치는 `top`, `bottom`, `left`, `right` 속성을 사용해 수정할 수 있으나, 설정된 `position` 값에 따라 효과가 다르다는 것 파악하기. 조상 요소를 포지셔닝하여, 그 안에 있는 포지셔닝된 요소의 컨텍스트(기준점) 설정하기.

학습 목표:

static 포지셔닝이 페이지에 요소가 배치되는 '기본값'임을 알기.
상대적으로 포지셔닝된(relatively positioned) 요소는 정상 흐름 안에 남아있지만, 절대(absolute) 및 고정(fixed)/스티키(sticky) 포지셔닝은 요소를 정상 흐름에서 완전히 빼내어 분리된 레이어에 배치한다는 것 이해하기.
최종 레이아웃 위치는 top, bottom, left, right 속성을 사용해 수정할 수 있으나, 설정된 position 값에 따라 효과가 다르다는 것 파악하기.
조상 요소를 포지셔닝하여, 그 안에 있는 포지셔닝된 요소의 컨텍스트(기준점) 설정하기.

이 글에 나오는 연습 문제들은 여러분의 컴퓨터(로컬)에서 직접 해보시는 것을 권장합니다. 가능하시다면 저희 GitHub 저장소에서 0_basic-flow.html 복사본을 다운로드하여 (소스 코드 확인하기) 시작점으로 사용해 주세요.

포지셔닝 소개 (Introducing positioning)

포지셔닝을 사용하면 정상적인 문서 흐름을 무시(overriding)하여 흥미로운 결과물들을 만들어낼 수 있습니다. 원래 배치되어야 할 기본 흐름 위치에서 박스들의 위치를 살짝 비틀어 독특하고 불규칙적인 느낌을 주고 싶으신가요? 포지셔닝이 제격입니다. 페이지의 다른 부분 위로 둥둥 떠다니게 하거나, 페이지를 아무리 스크롤해도 브라우저 창 내부의 똑같은 자리에 항상 고정되어 있는 UI 요소를 만들고 싶으신가요? 이 역시 포지셔닝이 가능하게 해 줍니다.

HTML 요소에 적용할 수 있는 포지셔닝에는 여러 가지 종류가 있습니다. 요소에 특정 유형의 포지셔닝을 활성화하려면 position 속성을 사용합니다.

💡 강사의 실무 팁!
포지셔닝은 현대 웹 애플리케이션 UI에서 없어서는 안 될 필수 요소입니다. 화면 중앙에 나타나는 '모달(Modal) 팝업', 사용자를 따라다니는 우측 하단의 'Top 이동 버튼', 특정 요소에 마우스를 올리면 나타나는 '툴팁(Tooltip)', 상단에 고정된 '내비게이션 바(GNB)' 등 거의 모든 인터랙티브 UI가 position 속성을 기반으로 제작됩니다.

정적 포지셔닝 (Static positioning)

정적 포지셔닝(Static positioning)은 모든 요소가 기본적으로 가지는 값입니다. 이것은 그저 "해당 요소를 정상적인 흐름(normal flow)에 따른 기본 위치에 놓아라 — 특별히 볼 건 없다"는 의미입니다.

이것이 어떻게 작동하는지 확인하고(겸사겸사 다음 섹션을 위한 예제를 설정하기 위해) HTML에 있는 두 번째 <p> 태그에 positioned라는 class를 추가해 봅시다:

<p class="positioned">…</p>

이제 여러분의 CSS 맨 밑에 다음 규칙을 추가하세요:

.positioned {
  position: static;
  background: yellow;
}

저장하고 새로고침을 해보면, 두 번째 문단의 배경색이 노란색으로 업데이트된 것 외에는 위치상 아무런 차이도 보이지 않을 겁니다. 정상입니다! 방금 말씀드렸듯이 정적 포지셔닝은 기본 동작(default behavior)이니까요!

📝 참고사항 (Note):
현재 진행된 예제는 1_static-positioning.html에서 라이브로 확인하실 수 있습니다 (소스 코드 확인하기).

상대 포지셔닝 (Relative positioning)

우리가 살펴볼 첫 번째 진짜 포지션 타입은 상대 포지셔닝(Relative positioning)입니다. 이것은 정적 포지셔닝과 매우 비슷하지만, 요소가 정상 흐름 속에서 자신의 자리를 차지하고 난 뒤에 그 최종 위치를 수정할 수 있다는 점이 다릅니다. 심지어 페이지의 다른 요소들과 겹치게 만들 수도 있죠. 코드에서 position 선언을 다음과 같이 수정해 보세요:

position: relative;

이 상태에서 저장하고 새로고침을 해봐도 여전히 결과 화면에는 아무 변화가 없을 겁니다. 그럼 도대체 요소의 위치를 어떻게 수정할까요? 바로 다음 섹션에서 설명할 top, bottom, left, right 속성을 사용해야 합니다.

top, bottom, left, right 소개 (Introducing top, bottom, left, and right)

top, bottom, left, right 속성은 position과 함께 쓰여서 포지셔닝된 요소를 정확히 어디로 이동시킬지 지정합니다. 이를 직접 확인해 보기 위해 CSS의 .positioned 규칙에 다음 선언들을 추가해 봅시다:

top: 30px;
left: 30px;

📝 참고사항 (Note):
이 속성들의 값으로는 픽셀(px), mm, rems, % 등 상식적으로 예상할 수 있는 단위(units)를 자유롭게 사용할 수 있습니다.

이제 저장하고 새로고침을 해보면, 다음과 비슷한 결과를 볼 수 있을 것입니다:

(브라우저 렌더링 화면: 노란색 배경의 두 번째 문단이 원래 있어야 할 위치에서 살짝 오른쪽과 아래쪽으로 이동하여 다른 문단들과 겹쳐 있는 모습)

멋지지 않나요? 그런데, 결과가 여러분의 예상과는 좀 달랐을 수 있습니다. 우리는 분명히 top(위)과 left(왼쪽)를 지정했는데 왜 요소는 바닥(아래)과 오른쪽으로 이동했을까요? 약간 직관에 어긋난다고 느껴질 수 있습니다.

이렇게 생각하셔야 합니다. 포지셔닝된 상자의 지정된 면(side)을 밀어내어 반대 방향으로 움직이게 만드는 보이지 않는 힘(force)이 있다고 말이죠. 예를 들어, top: 30px;을 지정하면 어떤 힘이 상자의 위쪽(top)을 꾹 눌러서 상자를 아래쪽으로 30px만큼 밀어내는 것입니다.

💡 강사의 실무 팁! (상대 포지셔닝의 진짜 용도)
사실 실무에서 position: relative;에 top, left를 주어서 시각적으로 요소를 이동시키는 경우는 거의 없습니다. 주변 요소들과 겹치기 때문에 레이아웃이 지저분해지기 쉽거든요.
그렇다면 relative는 언제 쓸까요? 바로 다음 챕터에 나올 absolute 요소를 띄울 때, 그 녀석이 기준점으로 삼을 "울타리(부모)" 역할을 하기 위해 99% 사용됩니다! 이 사실을 기억하시고 다음 챕터를 읽어주세요!

📝 참고사항 (Note):
필요하다면 top, bottom, left, right를 사용해 요소의 크기를 조정(resize)할 수도 있습니다. 포지셔닝된 요소에 top: 0; bottom: 0; left: 0; right: 0;과 margin: 0;을 줘보고 무슨 일이 일어나는지 확인해 보세요! (확인한 후에는 원래대로 되돌려 놓으시고요…)

📝 참고사항 (Note):
맞습니다. 포지셔닝된 요소에도 여전히 마진(margin)이 적용됩니다. 하지만 마진 상쇄(Margin collapsing) 현상은 더 이상 일어나지 않습니다.

📝 참고사항 (Note):
현재 진행된 예제는 2_relative-positioning.html에서 라이브로 확인하실 수 있습니다 (소스 코드 확인하기).

절대 포지셔닝 (Absolute positioning)

절대 포지셔닝(Absolute positioning)은 아주 전혀 다른 결과를 가져옵니다.

position: absolute 설정하기 (Setting position: absolute)

코드의 position 선언을 다음과 같이 변경해 보세요:

position: absolute;

이제 저장하고 새로고침을 하시면, 대략 이런 모습이 보일 겁니다:

(브라우저 렌더링 화면: 노란색 배경의 문단이 문서 맨 위쪽 구석으로 붕 떠 올라가 있고, 그로 인해 아래에 있던 다른 문단들이 끌어올려져 겹쳐진 모습)

무슨 일이 일어났는지 봅시다 — 이해하기 어렵다면 속성들을 하나씩 지워보면서 확인해 보세요:

포지셔닝된 요소가 문서 흐름에서 원래 있어야 할 자리가 흔적도 없이 사라졌고, 첫 번째 문단과 세 번째 문단이 마치 두 번째 문단이 애초에 존재하지 않았던 것처럼 서로 딱 붙어버린 것을 알 수 있습니다!
어떤 면에서는 사실입니다. 절대 포지셔닝된 요소(absolutely positioned element)는 더 이상 정상적인 문서 흐름(normal document flow) 안에 존재하지 않습니다. 그 대신 모든 것들과 분리된 자신만의 별도 레이어(layer)에 붕 떠서 존재하게 되죠.
이것은 매우 유용합니다. 페이지에 있는 다른 요소들의 레이아웃을 망가뜨리지 않고도 완전히 독립된 UI 기능들을 만들 수 있다는 뜻이니까요. 팝업 정보창, 컨트롤 메뉴, 마우스를 올렸을 때 나타나는 패널, 드래그 앤 드롭으로 이동할 수 있는 UI 등이 모두 이것 덕분에 가능해집니다.
두 번째로, 요소의 위치가 바뀌었다는 점을 주목하세요. 절대 포지셔닝에서는 top, bottom, left, right가 다르게 작동하기 때문입니다. 정상 문서 흐름 안에서의 상대적인 위치를 기준으로 움직이는 것이 아니라, 포함하는 요소(containing element)의 각 변(side)으로부터 얼마나 떨어져 있을지 그 거리를 지정하게 됩니다. 이 경우, 절대 포지셔닝된 요소가 포함하는 요소(여기서는 초기 컨테이닝 블록(initial containing block), 아래 설명 참조)의 상단(top)에서 30px, 좌측(left)에서 30px 떨어져서 자리 잡으라고 지시한 것입니다.

📝 참고사항 (Note):
현재 진행된 예제는 3_absolute-positioning.html에서 라이브로 확인하실 수 있습니다 (소스 코드 확인하기).

포지셔닝 컨텍스트 (Positioning contexts)

그렇다면 절대 포지셔닝된 요소에게 "포함하는 요소(containing element)"란 대체 누구일까요? 이것은 포지셔닝된 요소의 조상(ancestors) 요소들이 가진 position 속성값에 따라 크게 달라집니다.

만약 조상 요소들 중 그 어떤 것도 position 속성이 명시적으로 정의되어 있지 않다면, 기본적으로 모든 조상들은 정적(static) 포지션을 갖게 됩니다. 그 결과 절대 포지셔닝된 요소는 초기 컨테이닝 블록(initial containing block) 안에 포함되게 되죠. 초기 컨테이닝 블록은 브라우저 뷰포트(화면)의 크기를 가지며, <html> 요소마저 품고 있는 거대한 블록입니다. 쉽게 말해, 절대 포지셔닝된 요소는 <html> 요소를 뚫고 나가 초기 뷰포트를 기준으로 배치된다는 뜻입니다.

HTML 소스 코드상으로는 포지셔닝된 요소가 <body> 안에 중첩되어 있지만, 최종 레이아웃에서는 페이지 전체 화면의 상단과 왼쪽 모서리로부터 30px 떨어진 곳에 놓이게 됩니다.

우리는 이 포지셔닝 컨텍스트(positioning context), 즉 절대 포지셔닝된 요소가 "누구를 기준으로 움직일 것인가"를 변경할 수 있습니다. 방법은 요소가 중첩되어 있는 조상 요소(부모나 조부모 등) 중 하나에 포지셔닝(static 이외의 값)을 설정하는 것입니다. (당연히 자기가 들어있지도 않은 엉뚱한 요소를 기준으로 삼을 순 없습니다.)

이를 직접 확인하기 위해 CSS의 body 규칙에 다음 선언을 추가해 보세요:

position: relative;

이제 결과를 확인해 보시면:

(브라우저 렌더링 화면: 이제 노란색 문단이 뷰포트 맨 위가 아니라 body 요소를 기준으로 안쪽으로 배치된 모습)

이제 포지셔닝된 요소가 뷰포트 전체가 아니라 <body> 요소에 상대적으로 배치되었습니다! 앞서 설명해 드렸던 relative의 진짜 용도가 바로 이것입니다.

💡 강사의 실무 팁! (부모에게 Relative, 자식에게 Absolute!)
"자식을 맘대로 공중에 띄우고 싶다면, 부모에게 밧줄(relative)을 묶어라!"
프론트엔드 실무의 절대 규칙입니다. 툴팁이나 배지 알림 아이콘 등을 버튼의 우측 상단에 예쁘게 띄우고 싶다면, 반드시 버튼 래퍼에 position: relative;를 주고 그 안의 배지에 position: absolute;를 주어 띄워야만 화면 크기가 변해도 배지가 버튼 옆을 찰싹 따라다닙니다!

📝 참고사항 (Note):
현재 진행된 예제는 4_positioning-context.html에서 라이브로 확인하실 수 있습니다 (소스 코드 확인하기).

z-index 소개 (Introducing z-index)

절대 포지셔닝으로 요소를 공중에 띄우는 건 아주 재밌는 일이지만, 우리가 아직 고려하지 않은 한 가지가 있습니다. 요소들이 서로 겹칠 때, 어떤 요소가 다른 요소들 위에 표시되고 어떤 요소가 밑에 깔릴지는 누가 결정할까요? 지금까지 본 예제에서는 컨텍스트 안에 포지셔닝된 요소가 딱 하나뿐이었고, 포지셔닝된 요소는 포지셔닝되지 않은 일반 요소들 위로 무조건 올라가기 때문에 노란색 문단이 맨 위에 표시되었습니다. 그렇다면 포지셔닝된 요소가 여러 개라면 어떻게 될까요?

이를 확인하기 위해 CSS를 추가하여 첫 번째 문단도 절대 포지셔닝으로 만들어 봅시다:

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
}

이 시점에서 첫 번째 문단이 라임색(lime)으로 칠해지고 문서 흐름에서 빠져나와 원래 있던 자리에서 위로 조금 올라간 것을 볼 수 있습니다. 또한, 두 문단이 겹치는 영역에서 라임색 문단이 기존의 .positioned (노란색) 문단 아래에 깔려 있는 것을 볼 수 있을 것입니다. 왜 그럴까요? HTML 소스 순서상 .positioned 문단이 두 번째(더 나중에) 작성되었고, 포지셔닝된 요소들끼리 겹칠 때는 소스 코드상 나중에 작성된 요소가 이전에 작성된 요소를 덮어쓰며 맨 위로 올라오기 때문입니다.

이 쌓이는 순서(stacking order)를 바꿀 수 있을까요? 네, z-index 속성을 사용하면 됩니다!

"z-index"는 Z축(z-axis)을 의미합니다. 웹 페이지가 배경 이미지나 그림자 오프셋을 배치할 때 가로축(X축)과 세로축(Y축) 좌표를 사용했던 것을 기억하실 겁니다. 왼쪽에서 오른쪽으로 읽는 언어의 경우 (0,0)은 페이지(또는 요소)의 왼쪽 위 모서리이며, x축은 오른쪽으로 진행되고 y축은 아래로 진행됩니다.

웹 페이지에는 Z축도 있습니다: 모니터 화면 표면에서 시작해 여러분의 얼굴(혹은 화면 앞에 있는 무언가)을 향해 똑바로 뻗어 나오는 가상의 선이죠. z-index 값은 포지셔닝된 요소가 이 Z축의 어디쯤 위치할지를 결정합니다.
양수(positive) 값을 주면 스택(stack)의 더 높은 곳(사용자에게 가까운 곳)으로 이동하고, 음수(negative) 값을 주면 더 낮은 곳(배경 쪽)으로 밀려납니다. 기본적으로 모든 포지셔닝된 요소는 z-index: auto (사실상 0)를 갖습니다.

쌓이는 순서를 뒤집기 위해 p:nth-of-type(1) 규칙에 다음 선언을 추가해 보세요:

z-index: 1;

이제 라임색 문단이 노란색 문단을 뚫고 맨 위로 올라온 것을 볼 수 있을 것입니다!

z-index는 오직 단위 없는 숫자(정수)만 허용합니다. "이 요소를 Z축 방향으로 23픽셀만큼 띄워줘!"라고 설정할 수는 없습니다. 그런 식으로는 작동하지 않거든요. 단순히 더 높은 숫자를 가진 요소가 낮은 숫자를 가진 요소 위로 올라가게 되며, 어떤 숫자를 쓸지는 여러분 마음입니다. 2와 3을 쓰든, 300과 40000을 쓰든 결과는 똑같습니다.

💡 강사의 실무 팁! (z-index 지옥 피하기)
초보 시절에 레이아웃이 겹치면 다급하게 z-index: 999999;를 남발하는 경우가 정말 많습니다. 나중에 다른 개발자가 그걸 덮으려고 99999999를 넣게 되면서 그야말로 'z-index 지옥'이 열리게 되죠.
z-index는 보통 10, 20, 30처럼 여유를 두고 체계적으로 관리하는 것이 좋으며, "쌓임 맥락(Stacking Context)"이라는 개념 때문에 자식 요소가 아무리 z-index 100만 점을 가져도, 부모의 z-index가 낮으면 다른 요소를 뚫고 올라갈 수 없다는 점을 꼭 기억하셔야 합니다.

📝 참고사항 (Note):
현재 진행된 예제는 5_z-index.html에서 라이브로 확인하실 수 있습니다 (소스 코드 확인하기).

고정 포지셔닝 (Fixed positioning)

자, 이제 고정 포지셔닝(Fixed positioning)을 살펴보겠습니다. 이것은 절대 포지셔닝(absolute)과 거의 똑같이 작동하지만, 단 하나 아주 치명적인 차이점이 있습니다.

절대 포지셔닝은 자신과 가장 가까운 '포지셔닝된 조상'을 기준으로 제자리에 고정되는 반면, 고정 포지셔닝(fixed)은 오직 뷰포트(브라우저 화면)의 보이는 영역만을 기준으로 요소를 고정시킵니다.
이게 무슨 뜻이냐고요? 페이지를 아무리 위아래로 스크롤해도 그 요소는 화면상의 똑같은 위치에 찰싹 달라붙어서 사용자를 계속 따라다닌다는 의미입니다! 항상 화면 상단에 떠 있는 글로벌 내비게이션 메뉴 같은 유용한 UI 요소들을 만들 때 제격이죠.

무슨 말인지 직접 느껴보기 위해 간단한 예제를 만들어 봅시다.
먼저, CSS에서 기존의 p:nth-of-type(1) 규칙과 .positioned 규칙을 지워주세요.

그다음, body 규칙에서 position: relative;를 제거하고, 화면에 스크롤이 생기도록 강제로 고정 높이를 크게 줘봅시다:

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

이제 뷰포트 맨 위쪽에 착 달라붙도록 <h1> 요소에 position: fixed;를 주겠습니다. CSS에 다음 규칙을 추가하세요:

h1 {
  position: fixed;
  top: 0;
  width: 500px;
  margin-top: 0;
  background: white;
  padding: 10px;
}

화면 상단에 고정하기 위해 top: 0;은 필수입니다. 그리고 헤딩의 배경을 흰색(white)으로 칠해주어 그 밑으로 스크롤되어 올라오는 텍스트가 헤딩을 관통해서 보이지 않도록 가려주었습니다.

저장하고 새로고침 해보세요. 화면을 스크롤해 보면, 제목(<h1>)은 가만히 멈춰 있고 본문 내용이 그 아래로 빨려 들어가듯 사라지는 재미있는 효과를 볼 수 있습니다!

하지만 한 가지 문제점이 있습니다. 고정된 <h1> 요소가 문서의 정상 흐름에서 쏙 빠져나가 버렸기 때문에, 밑에 있던 본문 내용들이 위로 훅 끌어올려져서 맨 처음 단락 일부가 제목에 깔려 보이지 않게 된 것입니다.

이 문제는 단락들을 살짝 밑으로 밀어내 주면 해결됩니다. 첫 번째 문단에 위쪽 마진(top margin)을 주면 되겠죠. 이 코드를 추가해 보세요:

p:nth-of-type(1) {
  margin-top: 60px;
}

이제 완벽하게 동작하는 결과를 확인하실 수 있습니다!

💡 강사의 실무 팁! (모바일에서의 Fixed)
position: fixed는 웹사이트의 필수템입니다. 모바일 웹사이트의 하단 탭 바(Tab bar)나 위로 가기 버튼 등에 빠짐없이 사용되죠.
다만, 모바일 브라우저(특히 iOS Safari)에서 스마트폰의 가상 키보드가 팝업 될 때 fixed된 요소가 키보드 위로 미친 듯이 솟구치거나 레이아웃이 찢어지는 악명 높은 버그가 있습니다. 입력창(input)이 있는 페이지에서 fixed를 사용할 때는 항상 모바일 기기로 꼼꼼한 테스트를 거쳐야 합니다!

📝 참고사항 (Note):
현재 진행된 예제는 6_fixed-positioning.html에서 라이브로 확인하실 수 있습니다 (소스 코드 확인하기).

스티키 포지셔닝 (Sticky positioning)

지금까지 배운 것들보다 비교적 최근에 등장한 또 다른 포지션 값이 있습니다. 바로 position: sticky 입니다.

이것은 기본적으로 상대 포지셔닝(relative)과 고정 포지셔닝(fixed)의 하이브리드입니다! 평소에는 다른 평범한 요소들처럼 상대 포지셔닝 된 상태로 문서의 흐름을 따라 스크롤되다가, 브라우저 화면 안에서 특정한 임계점(threshold, 예를 들어 화면 맨 위에서 10px 위치)에 도달하는 순간! 갑자기 그 자리에 찰싹 달라붙어서(sticky) fixed 요소처럼 동작하게 됩니다.

기본 예제 (Basic example)

스티키 포지셔닝은 스크롤을 내릴 때 처음에는 다른 본문들과 함께 자연스럽게 올라가다가, 화면 최상단에 닿는 순간 그 자리에 딱 붙어서 네비게이션 바 역할을 계속 수행하게 만들 때 아주 유용하게 사용됩니다.

.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}

스크롤링 인덱스 (Scrolling index)

position: sticky를 활용하는 아주 흔하고 흥미로운 사례 중 하나가 바로 '스크롤링 인덱스(알파벳 목차)'를 만드는 것입니다. 스마트폰 주소록 앱을 쓸 때 스크롤을 내리면 'ㄱ', 'ㄴ', 'ㄷ' 헤더가 차례대로 화면 맨 위에 달라붙으며 다음 글자로 교체되는 것을 보신 적 있죠? 바로 그것입니다!

HTML 마크업은 대략 이렇게 생겼습니다:

<h1>Sticky positioning</h1>

<dl>
  <dt>A</dt>
  <dd>Apple</dd>
  <dd>Ant</dd>
  <dd>Altimeter</dd>
  <dd>Airplane</dd>
  <dt>B</dt>
  <dd>Bird</dd>
  <dd>Buzzard</dd>
  </dl>

CSS는 아래와 같이 작성할 수 있습니다. 일반적인 문서 흐름에서는 <dt>(알파벳 헤더) 요소들이 내용과 함께 위로 스크롤되어 올라갑니다. 하지만 <dt> 요소에 position: sticky를 주고 top: 0을 설정하면, 이 요소가 화면 맨 위(top: 0)에 도달하는 순간부터 그 자리에 딱 달라붙게 됩니다. 그리고 스크롤을 계속 내리면 그다음 나오는 <dt>가 올라와서 기존의 것을 쓱 밀어내고 자리를 차지하게 됩니다.

dt {
  background-color: black;
  color: white;
  padding: 10px;
  position: sticky;
  top: 0;
  left: 0;
  margin: 1em 0;
}

스티키 요소는 "스크롤 매커니즘"을 가진 가장 가까운 조상을 기준으로 '끈적하게' 달라붙습니다. (이때 조상이 스크롤 가능한지 여부는 조상의 overflow 속성에 의해 결정됩니다.)

💡 강사의 실무 팁! (Sticky가 안 먹혀요!)
현업에서 "분명히 sticky를 줬는데 그냥 화면 밖으로 스크롤돼서 사라져 버려요!" 라는 절망적인 질문을 수백 번도 넘게 들어봤습니다.
십중팔구 원인은 딱 하나입니다. 부모, 조부모, 혹은 조상 요소들 중 단 하나라도 overflow: hidden;, overflow: auto;, overflow: scroll; 속성을 가진 녀석이 있으면 sticky는 마법이 풀려버리고 완전히 고장 나 버립니다! sticky를 적용할 요소부터 최상단 body까지의 모든 조상 트리에 overflow가 적용되어 있는지 무조건 확인하세요!