0Pricing
CSS Academy · 강의

Z-index와 쌓임 맥락

z-index를 사용해 어떤 요소가 위에 표시될지 제어하고 쌓임 맥락을 이해합니다.

Z-index와 쌓임 맥락은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

z-index란 무엇입니까?

z-index는 Z축(앞에서 뒤로)을 따라 위치가 지정된 요소의 쌓임 순서를 제어합니다. 요소가 겹칠 때 값이 높은 요소가 값이 낮은 요소보다 위에 표시됩니다.

z-index는 position이 지정된 요소에서만 작동합니다

z-index는 position: static(기본값)인 요소에 영향을 주지 않습니다. z-index를 적용하려면 relative, absolute, fixed, sticky 중 하나가 설정되어 있어야 합니다.

<div class="popup">Popup (position + z-index)</div>

기본 쌓임 순서

z-index를 명시적으로 지정하지 않으면 요소는 다음 순서로 쌓입니다(뒤에서 앞으로):

  1. 루트 요소의 배경
  2. 블록 수준 요소(흐름 순서대로)
  3. 부동 요소
  4. 인라인 요소
  5. z-index가 auto 또는 0인 위치 지정 요소

쌓임 맥락

쌓임 맥락은 공통 z축을 사용하는 요소 레이어입니다. z-index 값은 같은 쌓임 맥락 안에서만 서로 비교됩니다. 쌓임 맥락 안의 요소는 z-index 값과 관계없이 그 맥락 밖의 요소보다 위에 배치될 수 없습니다.

쌓임 맥락을 만드는 것은 무엇인가요

다음과 같은 경우 새 쌓임 맥락이 만들어집니다:

  • position과 z-index가 함께 사용되고 z-index가 auto가 아닌 경우
  • opacity가 1보다 작은 경우
  • transform, filter, perspective가 적용된 경우
  • 특정 속성에 will-change가 지정된 경우
  • isolation: isolate
  • z-index가 있는 플렉스/그리드 자식 요소

쌓임 맥락 격리

isolation: isolate를 사용하면 시각적인 부작용 없이 의도적으로 쌓임 맥락을 만들 수 있습니다. 자체 z-index 레이어를 포함해야 하는 사용자 인터페이스 구성 요소에 유용합니다.

<div class="modal-wrapper">Isolated stacking context</div>

z-index 스케일 문제

프로젝트에서는 개발자들이 값을 9999나 99999까지 높이며 경쟁하는 "z-index 전쟁"이 자주 발생합니다. CSS 변수를 사용해 이름이 지정된 z-index 스케일을 만들면 이 문제를 해결할 수 있습니다:

<p>Custom properties define a z-index scale used across the app.</p>

음수 z-index

음수 z-index 값은 요소를 포함 블록의 배경 뒤에 배치합니다. 콘텐츠 뒤에 장식용 의사 요소 레이어를 배치할 때 사용할 수 있습니다.

<div class="card">Card with a decorative gradient layer behind it</div>

쌓임 문제 디버깅

모달이나 툴팁이 다른 요소 뒤에 나타날 때 원인은 대개 z-index가 낮은 상위 요소의 쌓임 맥락입니다. DevTools의 3D 보기를 사용하거나 부모 요소의 opacity, transform, filter를 확인해 보세요.

플렉스와 그리드에서의 z-index

플렉스 및 그리드 항목은 position을 명시적으로 설정하지 않아도 z-index를 직접 사용할 수 있습니다. 브라우저는 쌓임을 처리할 때 이들을 위치가 지정된 요소로 취급합니다.

<div class="grid"><div class="grid-item demo-hover">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div>

고정 모달과 z-index

모달은 상위 요소의 쌓임 맥락에서 벗어날 수 있도록 <body>의 직접적인 자식 요소(또는 최상위 래퍼)여야 합니다. HTML의 <dialog> 요소는 브라우저의 최상위 레이어에서 이 기능을 기본으로 처리합니다.

빠른 확인

서로 다른 부모 쌓임 맥락에 있는 두 겹친 요소에 모두 z-index: 100이 지정되어 있습니다. 어느 요소가 위에 나타날지를 결정하는 것은 무엇인가요?

복습

z-index는 위치가 지정된 요소의 앞뒤 쌓임 순서를 제어합니다. 쌓임 맥락은 z-index 간의 경쟁을 격리합니다. 부모 요소에 쌓임 맥락을 만드는 모든 설정은 자식 요소의 z-index 값이 그 맥락 안에 갇히게 만들 수 있습니다. 명시적인 경계를 만들려면 isolation: isolate를 사용하고, z-index 스케일에는 CSS 변수를 사용하세요.

자주 묻는 질문

“Z-index와 쌓임 맥락” 강의는 무료인가요?

네 — “Z-index와 쌓임 맥락” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Z-index와 쌓임 맥락”에서 뭘 배우나요?

z-index를 사용해 어떤 요소가 위에 표시될지 제어하고 쌓임 맥락을 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“Z-index와 쌓임 맥락” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 정적 및 상대 위치 지정
  2. 절대 위치 지정과 포함 블록
  3. 고정 및 끈끈한 위치 지정
  4. Z-index와 쌓임 맥락
← CSS Academy(으)로 돌아가기