사례 1: 고정 헤더와 사이드바 구현하기 📌

많은 웹사이트와 앱에서는 스크롤해도 항상 화면에 보이는 고정 헤더와 사이드바를 구현해. 이때 z-index 관리가 중요해져.

/* 고정 헤더와 사이드바 구현 */
:root {
  --z-header: 100;
  --z-sidebar: 90;
  --z-content: 1;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: var(--z-header);
}

.sidebar {
  position: fixed;
  top: 60px; /* 헤더 높이만큼 아래로 */
  left: 0;
  bottom: 0;
  width: 250px;
  background: #f5f5f5;
  z-index: var(--z-sidebar);
}

.content {
  margin-top: 60px; /* 헤더 높이만큼 아래로 */
  margin-left: 250px; /* 사이드바 너비만큼 오른쪽으로 */
  position: relative;
  z-index: var(--z-content);
}
      

이 구현에서 주목할 점:

1. 헤더의 z-index가 가장 높아 항상 최상단에 표시돼
2. 사이드바는 헤더보다는 낮지만 콘텐츠보다 높은 z-index를 가져
3. 콘텐츠 영역은 가장 낮은 z-index를 가지지만, 그 안의 요소들은 별도의 스태킹 컨텍스트를 가질 수 있어

재능넷의 대시보드 페이지도 이와 유사한 구조로 구현되어 있어. 사용자가 스크롤해도 중요한 네비게이션 요소는 항상 접근 가능하지!

사례 2: 드롭다운 메뉴와 오버레이 충돌 해결하기 🔄

드롭다운 메뉴가 모달이나 다른 오버레이 요소와 충돌하는 경우가 많아. 이런 상황을 어떻게 해결할까?

/* 문제 상황 */
.dropdown {
  position: relative;
}

.dropdown__menu {
  position: absolute;
  z-index: 10;
}

.overlay {
  position: fixed;
  z-index: 5; /* 드롭다운보다 낮음 */
}

/* 해결책: 컨텍스트 격리 */
.app-header {
  position: relative;
  z-index: 20; /* 오버레이보다 높게 설정 */
}

.dropdown {
  position: relative; /* 스태킹 컨텍스트는 부모인 .app-header에 의존 */
}

.dropdown__menu {
  position: absolute;
  z-index: 1; /* 로컬 컨텍스트 내에서만 필요 */
}

.overlay {
  position: fixed;
  z-index: 10; /* .app-header보다 낮지만 다른 요소보다는 높음 */
}
      

이 해결책의 핵심은 드롭다운을 포함하는 헤더에 더 높은 z-index를 부여하고, 드롭다운 자체는 로컬 스태킹 컨텍스트 내에서만 z-index를 사용하는 거야. 이렇게 하면 전역 z-index 충돌을 방지할 수 있어.

사례 3: 복잡한 카드 UI 구현하기 🃏

카드 기반 UI에서 카드가 호버나 클릭 시 확장되거나 강조되어야 하는 경우가 많아. z-index를 어떻게 활용할까?

/* 카드 그리드 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  position: relative; /* 컨테이너에 스태킹 컨텍스트 생성 */
}

.card {
  position: relative;
  transition: transform 0.3s, z-index 0s 0.3s; /* z-index 전환 지연 */
  z-index: 1;
}

.card:hover, .card:focus {
  transform: scale(1.05);
  z-index: 2; /* 호버/포커스 시 위로 올라옴 */
  transition: transform 0.3s, z-index 0s; /* z-index 즉시 변경 */
}

/* 활성 카드 */
.card.active {
  z-index: 3; /* 가장 위에 표시 */
}
      

이 구현의 핵심 포인트:

1. 카드 컨테이너에 position: relative를 적용해 스태킹 컨텍스트를 생성
2. 기본 상태의 카드는 낮은 z-index 값을 가짐
3. 호버나 포커스 시 z-index를 높여 다른 카드 위에 표시
4. 활성 카드는 가장 높은 z-index를 가져 항상 최상단에 표시
5. transition 속성으로 z-index 변화 타이밍을 제어

재능넷의 서비스 카드 목록도 이와 유사한 방식으로 구현되어 있어. 사용자가 관심 있는 서비스에 마우스를 올리면 카드가 살짝 올라와 시각적 피드백을 제공하지!

사례 4: 다단계 모달 처리하기 🔍

모달 위에 또 다른 모달이 열려야 하는 경우(예: 확인 대화상자)는 어떻게 처리할까?

/* 다단계 모달 시스템 */
:root {
  --z-modal-base: 1000;
  --z-modal-level-increment: 10;
}

.modal-container {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
}

/* 모달 레벨에 따른 z-index 계산 */
.modal-container[data-level="1"] {
  z-index: calc(var(--z-modal-base) + (var(--z-modal-level-increment) * 1));
}

.modal-container[data-level="2"] {
  z-index: calc(var(--z-modal-base) + (var(--z-modal-level-increment) * 2));
}

.modal-container[data-level="3"] {
  z-index: calc(var(--z-modal-base) + (var(--z-modal-level-increment) * 3));
}

/* 자바스크립트로 모달 열 때 */
function openModal(content, level = 1) {
  const modal = document.createElement('div');
  modal.className = 'modal-container';
  modal.dataset.level = level;
  // 모달 내용 추가
  document.body.appendChild(modal);
}
      

이 접근 방식의 장점:

1. 모달 레벨에 따라 자동으로 z-index가 계산돼
2. 새 모달이 추가되어도 기존 코드를 수정할 필요가 없어
3. CSS 변수를 사용해 기본값과 증분값을 쉽게 조정할 수 있어