z-index 정리 도구

사용 예시

• 레이어 체계 정리 - header, modal, tooltip 등 UI 레이어 값을 정렬해 확인합니다.

계산·사용 가이드

z-index란

z-index는 겹치는 요소의 쌓임 순서를 결정합니다. 값이 클수록 위에 표시됩니다. position이 static이 아닌 요소에만 적용됩니다.

스태킹 컨텍스트 주의

z-index는 같은 스태킹 컨텍스트(stacking context) 안에서만 비교됩니다. 부모 요소가 새 스태킹 컨텍스트를 만들면 자식의 z-index가 아무리 커도 다른 컨텍스트와 비교되지 않습니다.

자주 묻는 질문

입력 형식은 무엇인가요?

modal 1000처럼 이름과 숫자를 한 줄에 입력합니다.

관련 도구

• JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.
• UUID 생성기 - 암호학적으로 안전한 UUID v4를 최대 20개까지 한 번에 생성합니다.
• 비밀번호 생성기 - 문자셋과 길이를 지정해 암호학적으로 안전한 비밀번호를 생성합니다.
• JWT 디코더 - JWT의 header와 payload를 디코딩해 JSON과 주요 클레임을 확인합니다.
• 정규식 테스터 - 정규식 패턴을 입력해 텍스트에서 매칭 결과를 실시간으로 확인합니다.
• QR 코드 생성기 - 텍스트나 URL을 QR 코드로 변환하고 이미지로 다운로드합니다.