[CSS 디자인] 깨지기 어려운 z-index를 지정하는 것에 대해 생각합니다.

요약

각 구성 요소에 대해 지정할 z-index 값을 정의합니다.

동기 부여

나는 z-index 충돌을 피하고 싶다

지정 이유를 명확히 하고 싶음z-index

더 많은 구성 요소가 추가될 때마다 증가하지 않음z-index

전제 조건

The stacking context - MDN

isolation - MDN

Z-색인 규칙

z-index 가급적 사용하지 마세요.

z-index에서 0까지 4를 사용합니다.

원칙적으로 -1 와 같은 음수를 사용하지 마십시오.

레이어 스택 규칙

구성 요소가 각 역할에 대해 계층(계층 구조)에 있어야 하는 값z-index을 정의합니다.

레이어가 쌓이면 z-index 값을 늘립니다.

레이어 스택 4: z-인덱스: 4 .

모든 상태에서 맨 위에 배치할 요소입니다.

모달

서랍장

오버레이

레이어 스택 3: z-인덱스: 3

항상 맨 위에 배치되는 요소입니다.

항상 맨 위에 배치되는 요소입니다.

글로벌 헤더(예: 뒤에 오는 고정 헤더)

레이어 스택 2: z-인덱스: 2 .

툴팁

팝오버

플로팅 버튼(예: 캐러셀용 화살표 버튼 등)

레이어 스택 1: z-인덱스: 1 .

스택이 없는 요소 위에 배치됩니다.

배지

z-index 를 정의합니다.

:root {
  --layer-stack-1: 1;
  --layer-stack-2: 2;
  --layer-stack-3: 3;
  --layer-stack-4: 4;
}

.modal {
  z-index: var(--layer-stack-4);
}

.modal-in-modal {
  z-index: calc(var(--layer-stack-4) + 1);
}

격리 규칙

z-index가 레이어 스택 정의에서만 구성 요소 간에 충돌하여 의도하지 않은 겹침이 발생할 수 있습니다. 이러한 경우 isolation를 사용하여 구성 요소의 루트에 쌓임 컨텍스트를 생성하여 문제를 해결할 수 있습니다.

.special-components {
  isolation: isolate; /* generate stacking context */
  position: absolute;
}

.special-components__item {
  position: absolute;
  z-index: 100;
}

.modal {
  position: absolute;
  z-index: var(--layer-stack-4);
}

기본적으로 z-index 명세만으로 문제가 없는 HTML 구조를 사용하는 것이 바람직하지만 z-index: calc(var(--layer-stack-2) + 1); 등의 명세를 사용할 경우 다른 컴포넌트와 의도치 않게 중복될 가능성이 높다. 하위 요소에 isolation 사양이 있는 구성 요소의 루트에 대해 z-index를 지정하는 것이 좋습니다.

덧붙여서, isolation 가 출현하기 전에 부작용 없이 transform 를 지정하여 스태킹 컨텍스트를 생성하는 해킹이 있었습니다(예: transform: scale(1) ).

요약

레이어 스택 규칙에 따라 z-index를 지정합니다.

구성 요소 루트

에 대해 isolation: isolate를 지정합니다.