Z-Index Inspector는 웹 페이지의 모든 요소 스태킹 순서를 완전히 드러냅니다. z-index 값을 가진 모든 요소가 페이지 위에 강조 표시되고 라벨이 붙으며, 정렬된 레이어 맵 패널에서 가장 아래부터 위까지 모든 z-index 레이어를 보여줍니다. position, transform, opacity 등으로 생성된 스태킹 컨텍스트를 식별하여 z-index 디버깅을 시각적이고 직관적으로 만들어줍니다.
z-index 버그는 CSS에서 가장 짜증나는 문제 중 하나입니다. 모든 것 위에 나타나야 할 모달이 사이드바 뒤에 숨거나, 드롭다운 메뉴가 다음 섹션 뒤로 사라지거나, 툴팁이 부모 요소 때문에 보이지 않는 경우가 흔합니다. 대부분의 원인은 스태킹 컨텍스트에 대한 이해 부족이며, 브라우저 DevTools는 이를 시각화하는 데 거의 도움이 되지 않습니다. Z-Index Inspector는 보이지 않는 것을 보이게 만듭니다. 명시적인 z-index를 가진 모든 요소에 색상 오버레이와 z-index 숫자 라벨이 표시됩니다. 정렬된 레이어 맵 패널은 z-index 값을 가장 높은 것(위)부터 낮은 것(아래)까지 나열하며, 각 값이 어떤 CSS 클래스나 요소에 속하는지 보여줍니다. 가장 중요한 것은 스태킹 컨텍스트 경계를 식별한다는 점입니다. position + z-index, transform, opacity < 1, filter, will-change, isolation 등으로 새로운 스태킹 컨텍스트를 만드는 요소를 별도로 표시하여 z-index가 예상대로 작동하지 않는 이유를 추적할 수 있습니다.
z-index 값을 가진 모든 요소에 반투명 색상 오버레이와 z-index 숫자 라벨 배지가 표시됩니다. 높은 z-index 값은 따뜻한 색상(빨강 계열), 낮은 값은 차가운 색상(파랑 계열)으로 표시되어 스태킹 순서가 직관적으로 이해됩니다.
사이드 패널에 페이지에서 발견된 모든 z-index 값이 가장 높은 것(위)부터 낮은 것(아래)까지 정렬되어 표시됩니다. 각 항목에는 z-index 값, CSS 선택자 또는 클래스 이름, position 속성이 표시됩니다. 항목을 클릭하면 페이지에서 해당 요소가 강조 표시됩니다.
페이지의 모든 스태킹 컨텍스트 경계를 식별하고 이를 생성하는 CSS 속성(position: relative/absolute + z-index, transform, opacity < 1, filter, will-change, isolation: isolate, contain: layout)을 표시합니다. 이 목록을 통해 z-index 값이 예상대로 동작하지 않는 이유를 추적할 수 있습니다.
패널에서 레이어를 클릭하면 페이지에서 해당 요소가 강조 표시되고 스크롤됩니다. 또는 페이지에서 강조된 요소를 클릭하면 레이어 맵 패널에서 해당 위치를 찾아줍니다. 원하는 방향으로 스태킹 순서를 탐색할 수 있습니다.
각 레이어 항목에 요소의 CSS position 값(static, relative, absolute, fixed, sticky)이 표시됩니다. z-index는 positioned 요소에만 적용되므로 position이 static인데 z-index가 설정된 경우(일반적인 버그)를 바로 발견할 수 있습니다.
선택한 요소에 대해 루트까지 올라가는 조상 스태킹 컨텍스트 체인을 확인할 수 있습니다. 요소의 z-index 범위를 제한하는 조상 컨텍스트가 정확히 무엇인지 이해할 수 있으며, 대부분의 z-index 디버깅에서 핵심 인사이트가 됩니다.
z-index: 9999를 가진 모달이 z-index: 10인 사이드바 뒤에 숨는 이유를 알 수 있습니다. Z-Index Inspector는 모달의 부모가 position: relative와 z-index: 1로 스태킹 컨텍스트를 만들고, 사이드바의 부모가 z-index: 2를 가지고 있다는 것을 보여줍니다. 모달은 부모 컨텍스트를 벗어날 수 없습니다.
드롭다운 메뉴가 열릴 때 다음 섹션 뒤로 사라지는 문제를 해결할 수 있습니다. 인스펙터가 메뉴 컨테이너의 overflow: hidden(스태킹 컨텍스트 생성)이나 다음 섹션의 더 높은 z-index를 드러냅니다. 레이어 강조 표시로 겹침이 명확해집니다.
시간이 지나면서 z-index 값이 10, 100, 999, 9999, 99999처럼 계속 증가하는 경우가 많습니다. 레이어 맵이 모든 값을 정렬하여 보여주므로 실제 필요한 범위를 파악하고 1, 2, 3, 10, 100 같은 깔끔한 스케일로 단순화할 수 있습니다.
채팅 위젯, 쿠키 배너, 분석 오버레이가 높은 z-index 값을 가진 요소를 주입합니다. Z-Index Inspector가 정확히 어떤 값을 사용하는지 보여주므로 자신의 z-index 값을 적절히 설정하여 충돌을 피할 수 있습니다.
페이지의 모든 스태킹 컨텍스트를 검토하여 불필요한 것을 확인하세요. 시각적 효과를 위해 적용한 transform, filter, opacity가 의도치 않게 스태킹 컨텍스트를 만들어 다른 곳에서 z-index 문제를 일으킬 수 있습니다. 컨텍스트 목록으로 모두 가시화됩니다.
DevSuite Pro 플로팅 독을 열고 Z-Index Inspector 아이콘을 클릭하세요. 도구가 페이지를 스캔하여 z-index 값을 가진 모든 요소와 스태킹 컨텍스트 경계를 식별합니다.
z-index 값을 가진 요소들이 페이지 위에 색상 오버레이와 z-index 숫자 라벨로 표시됩니다. 높은 값은 따뜻한 색상, 낮은 값은 차가운 색상으로 나타납니다.
사이드 패널을 열어 모든 z-index 레이어가 가장 높은 것부터 낮은 것까지 정렬된 목록을 확인하세요. 각 항목에는 값, 선택자, position 속성이 표시됩니다. 항목을 클릭하면 페이지에서 해당 요소가 강조 표시됩니다.
패널의 "Stacking Contexts" 섹션에서 새로운 스태킹 컨텍스트를 만드는 모든 요소와 그 원인이 되는 CSS 속성을 확인하세요. 이는 z-index 문제를 이해하는 핵심입니다.
요소를 클릭하면 조상 스태킹 컨텍스트 체인이 표시됩니다. 어떤 부모 컨텍스트가 렌더링 순서를 제한하고 있는지 따라가며 스태킹 문제를 찾을 수 있습니다.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
