🔝 08. Positioning과 Stacking Context: 'z-index의 진실'

2026년 3월 5일 수정됨

📋 개요

요소를 자유자재로 배치하는 position 속성의 정석과, z-index가 먹히지 않는 근본적인 이유인 '쌓임 맥락'을 영철이와 함께 파헤쳐 봅니다.

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 9분(전체) / 핵심 파트만: 5분

🗺️ 이 문서의 흐름
[Position 4인방의 특성] → [Sticky의 실무 활용] → [Stacking Context의 비밀]

🎯 이 문서를 다 읽으면 할 수 있는 것

relative, absolute, fixed, sticky를 용도에 맞게 정확히 사용합니다.
z-index: 9999를 남발하지 않고도 요소를 원하는 층에 배치합니다.
새로운 '쌓임 맥락'이 생기는 조건을 파악해 버그를 미리 방지합니다.

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

🐣 영철 ( 신입 ): "영호 님! 분명히 모달에 z-index: 999999를 줬거든요? 근데 왜 자꾸 사이드바 밑에 깔리는 걸까요? 이거 브라우저 버그 아닌가요? 억울해요! 😫"
🦁 영호 ( 리드 ): "영철 님, z-index는 단순한 숫자가 아니에요. 우주의 법칙처럼 '차원(Stacking Context)'이 다르면 숫자가 아무리 커도 소용없죠. 브라우저를 탓하기 전에 영철 님이 어떤 차원을 만드셨는지부터 확인해봅시다."

🤔 왜 알아야 하는가

웹 페이지는 2차원 평면처럼 보이지만, 실제로는 레이어들이 겹겹이 쌓여 있는 3차원 공간입니다. position은 이 공간 안에서 요소의 위치를 결정하고, z-index는 그 층수(Layer)를 결정하죠.

신입 개발자들은 화면이 꼬이면 무지성으로 z-index 점수를 올립니다. 하지만 이는 머지않아 z-index: 2147483647이라는 괴물 같은 코드를 낳고, 관리 불가능한 상태에 빠지게 만듭니다. 5년차 이상의 시니어는 Stacking Context(쌓임 맥락) 라는 차원의 규칙을 이해해, 단 1점의 점수만으로도 우아하게 요소를 관리합니다.

📍 1. 위치의 마법사: Position 속성

relative: "내 원래 자리"를 기준으로 살짝만 움직입니다. (자식 요소 absolute의 기준점이 되기도 함)
absolute: "가장 가까운 조상(position이 static이 아닌)"을 기준으로 자유롭게 날아다닙니다. 일반적인 흐름(Document Flow)에서 완전히 빠집니다.
fixed: "브라우저 화면(Viewport)"에 딱 붙습니다. 스크롤을 내려도 고정됩니다.
sticky: 평소엔 일반적인 흐름에 있다가, 스크롤이 특정 지점에 도달하면 fixed처럼 달라붙습니다. (표의 헤더 등에 환상적!)

🦁 영호의 팁:
"absolute 요소를 썼을 때 기준점이 엉뚱한 곳으로 잡힌다면, 부모 요소에 position: relative가 빠져있지 않은지 제일 먼저 확인해보세요."

🏗️ 2. Stacking Context: 보이지 않는 차원의 벽

왜 z-index: 9999가 안 먹힐까요? 바로 새로운 쌓임 맥락이 생겼기 때문입니다.

쌓임 맥락은 새로운 '차원(Dimension)' 입니다. 한번 차원이 만들어지면, 그 안의 자식 요소들은 아무리 z-index를 크게 줘도 부모 차원의 벽을 넘을 수 없습니다. 마치 아파트 1층에서 999호를 산다고 2층에 사는 사람보다 높이 올라갈 수 없는 것처럼요!

🧠 영호의 핵심 레슨:
"쌓임 맥락을 한 마디로 요약하면: 부모의 z-index가 작으면, 자식이 아무리 높아도 갇혀버린다는 겁니다. 차원의 벽은 숫자로 부수지 못해요."

[새로운 차원(빌런)이 형성되는 조건]

position: absolute/relative이면서 z-index가 auto가 아닐 때
position: fixed/sticky일 때
opacity가 1보다 작을 때 (영철이가 0.9 줬던 그 속성!)
transform, filter, perspective 등의 속성이 부여됐을 때

🏗️ 차원의 벽: 왜 z-index: 9999가 질까요?

부모 A (z-index: 1)

자식 z-index:9999
(갇혀있음!)

부모 B (z-index: 2)

나는 2인데 9999를 이김!

⬆️ 자식이 z-index: 9999라도, 부모 A(z-index: 1)가 부모 B(z-index: 2)보다 낮으므로 절대 위로 못 올라갑니다!

⚠️ 함정 주의: opacity만 줘도 차원이 생깁니다!

❌ opacity: 0.99 → 새 차원 생성!

opacity가 1이 아닌 값이면 새 쌓임 맥락이 생깁니다. 자식 요소의 z-index가 무효화될 수 있어요!

❌ transform: translateZ(0) → 새 차원!

GPU 가속용으로 많이 쓰는 속성인데, 이것도 쌓임 맥락을 만듭니다. z-index 버그의 주범!

🛡️ 3. 5년차의 전략: z-index 관리법

상수로 관리: z-index: 10, z-index: 20 처럼 10 단위로 사이를 띄워서 정의하고, CSS 변수로 이름을 붙이세요 (예: --z-modal: 100).
구조적 해결: 모달 같은 최상위 요소는 <body> 바로 아래로 빼내어(Portal 기법) 부모의 쌓임 맥락에 갇히지 않게 하세요.

📝 마무리 퀴즈

Q1. 부모 요소가 position: relative이고, 자식 요소가 top: 50%인 position: absolute라면, 자식 요소는 어디에 위치하게 될까요?

✅ 정답: 부모 요소의 높이의 50% 지점(반으로 내려간 위치)에 자식의 상단 모서리가 위치한다.

💡 상세 해설:

원리 설명: position: absolute인 요소의 top: 50%는 가장 가까운 위치 지정 조상(static이 아닌) 을 기준으로 계산됩니다. 여기서 부모가 relative이므로 부모가 그 기준점이 되고, 부모 높이의 절반 지점에 자식의 상단 모서리(top edge) 가 위치합니다.
오답 피드백: "영철 님, 정확히 가운데 놓고 싶다면 top: 50%; transform: translateY(-50%)을 조합해야 해요. top: 50%만으로는 요소의 상단이 중간에 가는 거지 요소 자체가 중앙은 아니에요!"
📌 핵심 기억법: "top: 50%는 내 머리가 반에, transform: translateY(-50%)를 더해야 내 배꼽이 반에!"

Q2. 다음 중 새로운 '쌓임 맥락(Stacking Context)'을 생성하지 않는 속성은 무엇일까요?

opacity: 0.9
transform: scale(1.1)
background-color: red
position: fixed

✅ 정답: 3. background-color: red

💡 상세 해설:

원리 설명: background-color는 순수하게 색상만 바꾸는 속성이라 쌓임 맥락을 만들지 않습니다. 반면 opacity < 1, transform, filter, position: fixed/sticky 등은 모두 새로운 차원을 만들어요.
오답 피드백: "영철 님, 특히 opacity: 0.99도 새 차원을 만든다는 게 함정이에요. 거의 불투명인데도 그냥 1이 아니라는 이유만으로 차원이 생긴다니!"
📌 핵심 기억법: "색깔만 바꾸면 OK, 투명도·변형·위치를 건드리면 새 차원이 열린다!"

Q3. [영철이의 테스트 타임: 실무 딜레마]
영철이가 만든 헤더(.header)는 position: sticky; top: 0; z-index: 10;입니다. 그런데 본문 영역(.content)에 들어가는 이미지에 transform: translateZ(0); (GPU 가속용)을 줬더니, 이미지가 헤더 위로 튀어나와 버렸습니다! 헤더의 z-index를 100으로 올려도 해결되지 않네요. 이 현상의 근본적인 이유는 무엇일까요?

✅ 정답: transform 속성이 새로운 쌓임 맥락을 생성하여, 기존의 z-index 순서가 해당 맥락 안에서 재평가되었기 때문이다.

💡 상세 해설:

원리 설명: transform은 단순히 모양만 바꾸는 게 아니라 새로운 쌓임 맥락을 만듭니다. 이 때문에 이미지 요소가 헤더의 레이어 순서를 뛰어넘어 버린 것입니다.
오답 피드백: "영철 님, 숫자를 키우는 건 답이 아니에요. 이미지가 속한 부모 요소의 z-index를 조절하거나, 헤더의 z-index가 무조건 이길 수 있는 상위 수준의 맥락을 만들어야 합니다."
📌 핵심 기억법: "z-index가 안 되면 차원(Stacking Context)의 문을 열어봐라!"

🐣 영철이의 퇴근 일기

오늘 z-index의 정체를 알고 나니 그동안 내 코드가 얼마나 무식했는지 알 것 같다.
99999를 치면서도 "제발 이겨라"라고 빌기만 했는데, 그게 차원 문제였다니!
특히 opacity나 transform만 줘도 새로운 차원이 생긴다는 사실은 정말 충격적이었다.

💡 "z-index는 고도가 아니라 계급이다. 하지만 그 계급도 자기가 속한 국가(Stacking Context)를 벗어날 순 없다."

영호 님이 "모달은 웬만하면 최상위로 빼라"고 하신 게 다 이런 복잡한 싸움을 피하기 위해서였구나.
집에 가서 오늘 배운 내용대로 프로젝트의 z-index 변수들을 싹 정리해야겠다.
내일은 '반응형 디자인'의 최신 트렌드를 배운다는데, 이제 CSS의 끝이 보이는 것 같아 뿌듯하다! 🔝

🔝 08. Positioning과 Stacking Context: 'z-index의 진실'

📌 이 문서를 읽기 전에

🤔 왜 알아야 하는가

📍 1. 위치의 마법사: Position 속성

🏗️ 2. Stacking Context: 보이지 않는 차원의 벽

🛡️ 3. 5년차의 전략: z-index 관리법

📝 마무리 퀴즈

🐣 영철이의 퇴근 일기

🔗 더 알아보기