---
type: bookmarks
tags: ['css', 'z-index']
status: release
ctime: 2022-04-09
mtime: 2026-10-05
---

import QuoteLink from '@components/QuoteLink.astro'

<QuoteLink url="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/z-index">
  z-index
</QuoteLink>

![z-index 는 전역이 아니라 같은 쌓임 맥락 안에서만 비교된다. header 가 z-index 2, main 이 z-index 1 이면 main 안의 tooltip 은 z-index 999999 여도 header 아래에 깔린다 — 999999 는 main 안의 형제끼리만 비교되고, 맥락 밖으로 빠져나올 방법은 없다. 맥락은 z-index 를 준 positioned 요소 말고도 opacity 1 미만, transform·filter·clip-path, flex·grid 자식의 z-index, will-change, mix-blend-mode 로 의도치 않게 생긴다. 전략은 둘이다. 컴포넌트 안에서는 바깥 요소에 isolation: isolate 를 걸어 z-index 없이 맥락을 만든다 — 안쪽 1~5 는 그 안에서만 비교되고 밖으로 새지 않아, 컴포넌트가 바깥 z-index 값을 정하지 않아도 된다. 앱 레벨에서는 값을 숫자가 아니라 관계로 정의한다: base 0, above 1, below -1 을 두고 openButton 은 above + backdrop, dropdown 은 above + openButton 처럼 무엇 위에 있는지를 적는다. 상수는 쌓임 맥락별로 묶어 컴포넌트 옆에 둔다.](/svg/z_index_strategy.svg)

---

- [What the heck, z-index??](https://www.joshwcomeau.com/css/stacking-contexts/)
- [Managing CSS Z-Index In Large Projects — Smashing Magazine](https://www.smashingmagazine.com/2021/02/css-z-index-large-projects/)[^111-1]

---

[^111-1]: `z-index`값을 체계적으로 관리하기 위한 방법(변수로 설정해서 상대적으로 값을 설정)을 제시하고 있다.