Question 1

CSS z-index란 무엇인가요?

Accepted Answer

CSS z-index는 포지셔닝된 요소의 수직 스태킹 순서를 제어합니다. z-index가 높은 요소는 겹칠 때 낮은 요소 앞에 표시됩니다.

Question 2

z-index가 작동하지 않는 이유는 무엇인가요?

Accepted Answer

z-index는 포지셔닝된 요소(position: relative, absolute, fixed, sticky)에서만 작동합니다. position: static인 요소는 z-index 속성을 무시합니다.

Question 3

스태킹 컨텍스트란 무엇인가요?

Accepted Answer

스태킹 컨텍스트는 자체 스태킹 레이어를 만드는 요소입니다. opacity < 1, transform, filter 등의 속성은 새로운 스태킹 컨텍스트를 생성합니다.

Question 4

UI에서 자주 사용되는 z-index 값은 무엇인가요?

Accepted Answer

일반적인 값: 기본 콘텐츠는 0, 카드와 드롭다운은 10-100, 모달과 오버레이는 1000, 툴팁과 알림은 9999입니다.

Question 5

9999999와 같이 매우 높은 z-index 값을 사용해야 하나요?

Accepted Answer

아니요. 임의로 높은 값을 사용하면 유지보수가 어렵습니다. 디자인 시스템에서 z-index 스케일(예: 10, 100, 200, 500, 1000)을 정의하고 일관되게 사용하세요.

Z-Index 관리자

레이어 목록