드롭다운 메뉴나 팝업이 다른 영역 밑으로 숨어서 z-index를 9999, 99999까지 올려 봤는데도 그대로라면 숫자 문제가 아닙니다. 그 요소를 감싼 부모가 이미 쌓임 맥락(stacking context)을 만들고 있어서, 안쪽 숫자가 바깥과 비교되지 않는 경우가 대부분입니다.
원인 찾는 순서와 고치는 방법을 정리했습니다.

1. 먼저 z-index가 적용되는 조건인지 확인

가장 흔한 실수는 position이 없는 요소에 z-index만 준 경우입니다. 일반 블록 요소는 position: static이 기본값이라 z-index를 무시합니다. 단, flex나 grid의 자식 요소는 position 없이도 z-index가 적용됩니다.

/* 효과 없음: position이 static */
.dropdown { z-index: 100; }

/* 적용됨 */
.dropdown {
  position: absolute;
  z-index: 100;
}

2. 부모 중에 쌓임 맥락을 만드는 속성 찾기

조건이 맞는데도 안 된다면 개발자 도구에서 문제 요소부터 부모를 하나씩 거슬러 올라가며 아래 속성이 있는지 봅니다. 실무에서는 애니메이션 때문에 넣어 둔 transform이나 opacity, 그리고 고정 헤더의 position: fixed가 범인인 경우가 많았습니다.

3. 고치는 방법은 둘 중 하나

첫째, 비교가 일어나는 층에서 숫자를 조정합니다. 메뉴가 아니라 메뉴를 감싼 헤더 자체의 z-index를 옆 영역보다 높이는 식입니다. 둘째, 팝업이나 모달처럼 항상 맨 위에 떠야 하는 요소는 HTML 구조상 <body> 바로 아래로 빼 두는 것이 가장 확실합니다. 어떤 부모 영향도 받지 않기 때문입니다.

/* 사이트 공통 층 번호를 정해 두면 숫자 경쟁이 사라집니다 */
:root {
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 1000;
}
.header { position: relative; z-index: var(--z-header); }

반대로 의도치 않게 바깥 요소와 섞이는 걸 막고 싶을 때는 컴포넌트 최상단에 isolation: isolate를 주면 다른 스타일 변화 없이 쌓임 맥락만 새로 만들 수 있습니다.