포지션과 Z-인덱스

요소를 공중에 띄우고 다층 레이어로 쌓기

알림 배지(Badge), 드롭다운(Dropdown), 모달 팝업처럼 기존의 배치 흐름을 파괴하고 요소를 겹치게 하거나 공중에 띄울 때는 포지션과 Z-인덱스가 필수입니다. Tailwind는 relative, absolute 등의 포지셔닝 속성과 Z-인덱스를 조합하는 깔끔한 해결책을 제시합니다.

⚠️ 절대 포지션 적용 시의 대형 사고 방지 가이드

자식에게 absolute를 주고 붕 띄웠다면, 반드시 부모 컨테이너에 relative 클래스가 적혀있는지 1초만 체크해 보세요. 부모에 relative가 누락되면, 해당 자식은 전체 브라우저 body를 기준으로 공간 좌표를 잡기 때문에 모니터 밖 구석 엉뚱한 곳으로 날아가는 대참사가 납니다!

유틸리티 클래스	레이아웃 해석 규칙	주요 적용 용도
`relative`	문서 흐름을 유지하되, 절대 배치 자식의 중심 기준점 역할 수행	모든 절대 정렬(absolute)의 바깥 부모 카드 필수 적용
`absolute`	기존 공간을 차지하지 않고 붕 뜨며, relative 부모 기준 좌표 이동	알림 뱃지, 카드 위 닫기 단추, 마우스 호버 오버레이
`fixed`	부모와 무관하게 무조건 '브라우저 창(Viewport)' 기준으로 절대 고정	글로벌 내비게이션 바(GNB), 우측 하단 챗봇 상담 둥근 버튼
`sticky`	평소엔 흐름을 따르다가 스크롤이 임계 영역에 닿으면 고정	상세 스크롤 시 화면에 달라붙는 아티클 목차(Table of Contents)
`z-{index}`	Z-축 높이 적층 순서 지정 (0, 10, 20, 30, 40, 50)	팝업창 모달(z-50)이 기존 컴포넌트(z-10)를 완전히 덮도록 보정

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Stacking Layers Demo</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-slate-900 min-h-screen p-8 flex items-center justify-center"> <div class="max-w-md w-full bg-slate-800 rounded-3xl p-6 border border-slate-700 shadow-2xl relative"> <span class="absolute -top-3 -right-3 flex h-8 w-8"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span> <span class="relative inline-flex rounded-full h-8 w-8 bg-red-500 text-white font-bold text-xs items-center justify-center shadow-lg border border-slate-800"> 3 </span> </span> <div class="space-y-4"> <h2 class="text-2xl font-black text-white">Interactive Badge UI</h2> <p class="text-sm text-slate-400"> 우측 상단에 떠있는 붉은 알림 뱃지는 <code>absolute -top-3 -right-3</code>으로 부착되었습니다. 아래 버튼으로 뱃지의 표시 상태를 제어해보세요. </p> <button onclick="toggleBadge()" class="w-full bg-indigo-600 hover:bg-indigo-500 active:scale-95 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-indigo-600/30"> 알림 가리기/보이기 토글 </button> </div> </div> </body> </html>

유틸리티 클래스

레이아웃 해석 규칙

주요 적용 용도

relative

문서 흐름을 유지하되, 절대 배치 자식의 중심 기준점 역할 수행

모든 절대 정렬(absolute)의 바깥 부모 카드 필수 적용

absolute

기존 공간을 차지하지 않고 붕 뜨며, relative 부모 기준 좌표 이동

알림 뱃지, 카드 위 닫기 단추, 마우스 호버 오버레이

fixed

부모와 무관하게 무조건 '브라우저 창(Viewport)' 기준으로 절대 고정

글로벌 내비게이션 바(GNB), 우측 하단 챗봇 상담 둥근 버튼

sticky

평소엔 흐름을 따르다가 스크롤이 임계 영역에 닿으면 고정

상세 스크롤 시 화면에 달라붙는 아티클 목차(Table of Contents)

z-{index}

Z-축 높이 적층 순서 지정 (0, 10, 20, 30, 40, 50)

팝업창 모달(z-50)이 기존 컴포넌트(z-10)를 완전히 덮도록 보정