CSS Position과 z-index 트러블 슈팅

문제 상황

카테고리 섹션이 배경 요소(#starBackground)에 가려져 보이지 않는 현상 발생

이런 식으로 실제로는 중앙에 위치해있지만 보이지 않는 문제 발생

원인 파악

1. 배경 요소에 position: fixed 속성이 적용되어 있었음
2. 카테고리 섹션에 position 속성이 없어 z-index가 제대로 작동하지 않음

문제의 기술적 설명

• position: fixed가 적용된 요소는:
  • 새로운 쌓임 맥락(Stacking Context)을 생성
  • 뷰포트를 기준으로 고정
  • 일반 문서 흐름에서 분리
  • 기본적으로 다른 요소들보다 상위에 표시됨

해결 방법

css가 가지는 기본적인 쌓임 맥락 우선 순위의 문제이기 때문에 position: relative를 추가해서 쌓임 맥락을 줘서 보이도록 조정

//문제가 있던 코드
#starBackground {
    position: fixed;
    z-index: 0;
}

.category {
    /* position 속성 없음 */
}

// 해결된 코드
#starBackground {
    position: fixed;
    z-index: 0;
}
.category {
    position: relative; /* 추가 */
}

학습 포인트

1. z-index는 position: static(기본값)인 요소에서는 작동하지 않음
2. position: fixed가 적용된 요소는 자동으로 새로운 쌓임 맥락을 생성
3. z-index를 사용하려면 해당 요소에 position 속성(relative, absolute, fixed)이 필요

관련 개념

• CSS Stacking Context (쌓임 맥락)
• Position 속성
• z-index 동작 원리

참고사항

• position 속성값에 따른 쌓임 맥락 생성 조건 이해 필요
• z-index 사용 시 항상 position 속성 확인 필요
• fixed 요소와 다른 요소간의 층위 관계 주의