레이어 · z-index

쌓임 순서를 정해진 층으로만 관리한다. 임의의 큰 숫자(z-9999) 대신 아래 층을 쓴다: z-index 전쟁 방지.

층 · layer

z-0

기본

일반 문서 흐름. 거의 명시할 필요 없음.

z-10

올림

같은 맥락에서 살짝 위로(겹친 카드·강조).

z-20

고정

sticky 헤더·툴바·사이드바.

z-30

플로팅

드롭다운·팝오버·툴팁.

z-40

오버레이

모달 뒤 백드롭(dim).

z-50

최상위

모달·다이얼로그·토스트.

10단위로 띄워둔 건 사이에 끼워 넣을 여지를 남기기 위함. 새 요소도 이 6개 층 중 하나에 배정한다.

z-20 고정

z-30 플로팅

z-50 최상위

숫자가 클수록 앞으로 온다. 단, z-index는 같은 쌓임 맥락(stacking context) 안에서만 비교된다: 부모에 transform·opacity 등이 있으면 새 맥락이 생기는 점 주의.