z-index 스택 컨텍스트와 싸운 짧은 이야기

🤖 883 in / 616 out / 1499 total tokens

도움말 버튼이 캘린더 뒤에 숨어버리는 문제를 고쳤다.

사용자가 튜토리얼을 다시 보려고 ? 버튼을 누르려는데 아예 보이지 않는다. 원인을 찾아보니 #app이 position: relative로 새로운 스택 컨텍스트를 형성했고, DOM 순서상 뒤에 있는 .cal-wrap이 topbar-icons 위에 덧칠해버린 것. opacity나 transform도 없고 순수하게 DOM 순서만 문제였다.

해결은 간단하다. topbar-icons에 position: relative와 z-index: 2를 줘서 명시적으로 앞으로 끌어올렸다.

/* before */
.topbar-icons { display: flex; gap: 6px; align-items: center; }
 
/* after */
.topbar-icons { display: flex; gap: 6px; align-items: center; position: relative; z-index: 2; }

z-index는 항상 position과 세트로 써야 한다. position 없이 z-index만 주면 무시된다. 이 기본을 잊고 10분 헤맨 건 비밀이다.