CSS z-index — 박스 쌓임 순서 완전 정리

 

 

Web Development · CSS Position

CSS z-index —
겹친 박스의 앞·뒤 순서 결정

position이 있어야만 동작하는 "쌓임 순서" 속성

시작 오늘 분석할 코드

3개의 박스를 절대 위치로 겹쳐두고, z-index 값으로 어느 박스가 위에 보일지를 결정한다. 모달, 드롭다운, 툴팁 등 모든 겹침 UI의 기본 원리.

div#wrapper { position: relative; /* 자식 absolute의 기준점 */ } .box { position: absolute; width: 100px; height: 100px; border: 1px solid black; } #b1 { left: 50px; top: 50px; background: #ff0000; z-index: 1; } #b2 { left: 110px; top: 70px; background: #ffd800; z-index: 3; } #b3 { left: 70px; top: 110px; background: #0094ff; z-index: 1; }

실제 출력 미리보기

1

2

3

※ 노란색(2번)이 가장 위 — z-index가 3으로 가장 높음. 빨간(1번)과 파란(3번)은 z-index가 둘 다 1이지만 HTML에 늦게 등장한 파란이 위에.

용어 용어 정리

z-index박스의 z축(앞·뒤) 쌓임 순서

positionz-index가 작동하려면 static이 아닌 값 필요

relative자기 위치 유지 + 자식 absolute의 기준

absolute가장 가까운 relative 부모 기준 절대 좌표

stacking context쌓임 맥락 — z-index가 비교되는 범위

기본값 autoHTML 등장 순서대로 (뒤에 올수록 위)

---

1 z-index가 왜 동작 안 할 때가 있나?

가장 흔한 실수는 position이 static(기본값)인데 z-index를 줘서 안 먹는 경우다. z-index는 반드시 position: relative / absolute / fixed / sticky가 있어야 동작한다.

※ div { z-index: 999 } 만으로는 절대 안 됨. 반드시 position을 같이 줘야 함.

---

 

2 position의 4가지 값

값	의미	z-index 작동
static (기본)	일반 흐름 위치	안 됨
relative	원래 자리에서 top/left만큼 이동	됨
absolute	가장 가까운 relative 부모 기준	됨
fixed	화면(viewport) 기준 — 스크롤해도 고정	됨
sticky	특정 위치 도달 전엔 일반, 도달 후 fixed처럼	됨

---

 

3 z-index 값이 같으면?

이 코드처럼 #b1과 #b3 둘 다 z-index: 1이면, HTML 순서로 결정된다 — 나중에 등장한 박스가 위에. 그래서 b3(파란)이 b1(빨간) 위에 보임.

HTML 순서: b1 → b2 → b3 z-index: 1 3 1 쌓임 (위 → 아래): b2 (3) ← 가장 위 b3 (1) ← b1과 같지만 HTML에서 늦게 → 위 b1 (1) ← 가장 아래

---

4 stacking context — z-index의 함정

z-index가 9999여도 다른 박스보다 아래 보이는 경우가 있다. 그 이유는 "쌓임 맥락(stacking context)" 때문. 부모가 새 stacking context를 만들면 그 안의 z-index는 부모 안에서만 비교된다.

새 stacking context를 만드는 조건
z-index가 auto가 아닌 값 + position이 static이 아님
opacity가 1보다 작음
transform이 none이 아님
filter, perspective, isolation: isolate
flex/grid 자식 + z-index

※ 흔한 함정: 부모에 opacity: 0.99를 줬더니 자식의 z-index: 9999가 무시되는 경우 — 부모가 새 stacking context를 만들었기 때문.

---

반응형

5 실무 z-index 관리

※ 큰 프로젝트의 z-index 컨벤션

• z-index 값을 의미 단위로 변수화: --z-modal: 1000; --z-dropdown: 100;
• "막 9999"가 아니라 의미별 등급으로
• z-index 충돌 디버깅: 부모 stacking context 먼저 확인
• 10단위(1, 10, 100, 1000)로 띄워두면 사이에 추가 가능

---

6 자주 하는 실수

실수	증상	해결
position 없이 z-index	아무 효과 없음	relative/absolute/fixed 추가
9999 + 부모 opacity	여전히 다른 박스 아래	부모의 stacking context 정리
음수 z-index	박스가 부모 배경 뒤로 사라짐	음수는 의도적으로만
모든 박스에 큰 z-index	관리 어려움, 충돌	의미별 변수로 단계화

---

핵심 한 줄 요약

z-index박스의 앞·뒤(z축) 쌓임 순서

position 필수static이 아니어야 z-index 작동

큰 값이 위3 > 1 → 3번 박스가 1번보다 위

동률HTML 순서 — 늦게 등장한 박스가 위

stacking context부모가 만든 맥락 안에서만 비교 — 큰 함정

실무의미 단위 변수로 단계화하여 관리

Tags

#z-index #position #absolute #relative #fixed #sticky #stacking-context #쌓임순서 #겹침 #z축 #모달 #드롭다운 #오버레이 #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

z-index, position, absolute, relative, fixed, sticky, stacking-context, 쌓임순서, 겹침, z축, 모달, 드롭다운, 오버레이, CSS, HTML, 웹개발, 티스토리