쌓임 순서

정의

z-index는 여러 요소가 같은 자리에서 겹쳤을 때, 무엇이 앞에 오고 무엇이 뒤로 가릴지 정하는 값입니다. 값이 클수록 앞으로 나와 다른 요소를 덮고, 값이 작을수록 뒤로 밀려 가려집니다. 앞서 다룬 그림자가 요소를 시각적으로 떠 보이게 하는 눈속임이라면, z-index는 실제로 겹치는 순서 자체를 결정하는 값입니다. 그래서 드롭다운 메뉴가 아래 내용에 가리지 않고 펼쳐지거나, 모달이 화면 전체를 덮고 맨 앞에 뜨는 것은 모두 z-index 덕분입니다. 요소들이 나란히 놓여 있을 때는 이 값을 신경 쓸 일이 거의 없지만, 어느 한 요소가 다른 요소 위로 겹쳐 떠오르는 순간부터 갑자기 중요해집니다. 평소에는 보이지 않다가 필요할 때만 존재감을 드러내는, 화면 뒤편의 조용한 규칙 같은 값입니다.

왜 중요한가

z-index가 중요한 이유는 겹치는 요소가 의도한 순서대로 보이게 해 주기 때문입니다. 드롭다운, 모달, 툴팁, 알림처럼 다른 내용 위에 잠깐 떠올라야 하는 요소들이 z-index 없이는 엉뚱하게 뒤로 가려져 클릭조차 안 되는 일이 생깁니다. 하지만 이 값은 관리하기가 까다롭습니다. 어떤 요소가 다른 것 위로 안 올라온다고 급하게 999999 같은 큰 숫자를 붙이기 시작하면, 다음 요소는 그보다 더 큰 숫자를, 그다음은 또 더 큰 숫자를 붙이는 이른바 z-index 전쟁이 벌어집니다. 결국 아무도 어떤 값이 왜 그런지 모르는 상태가 되어 유지보수가 악몽이 됩니다. 그래서 z-index는 즉흥적으로 정하기보다, 화면 전체의 층위를 미리 설계해 두고 그 규칙 안에서만 값을 배정하는 것이 핵심입니다.

흔한 실수

• 요소가 가려질 때마다 999999 같은 아주 큰 숫자를 즉흥적으로 붙이는 것입니다. 이렇게 하면 다음 요소는 더 큰 값을 붙여야 하는 경쟁이 시작되어, 결국 어떤 값이 왜 그런지 아무도 모르는 z-index 전쟁으로 번집니다.
• 층위를 미리 정하지 않고 그때그때 필요한 값만 붙이는 것입니다. 규칙 없이 흩어진 z-index 값은 새 요소를 추가할 때마다 어디에 끼워야 할지 알 수 없어, 예상치 못한 가림 문제가 반복해서 터집니다.

실무 팁

• 화면의 층위를 미리 몇 단계로 정해 두세요. 예를 들어 기본 콘텐츠는 0, 드롭다운은 100, 모달은 1000, 툴팁은 1100처럼 역할별로 층을 나눠 두면, 새 요소가 생겨도 어느 층에 두어야 할지 곧바로 판단할 수 있습니다.
• 이렇게 정한 층위 값을 흩어 두지 말고 토큰이나 상수로 한곳에 모아 관리하세요. 값이 한자리에 정의돼 있으면 전체 겹침 순서를 한눈에 파악하고 조정하기 쉽습니다.
• 값을 무작정 키우기 전에, 정말 z-index 문제인지 아니면 요소가 서로 다른 쌓임 맥락에 속해 값이 통하지 않는 상황인지 먼저 확인하세요. 원인을 짚으면 큰 숫자 없이도 해결되는 경우가 많습니다.

관련 개념