Z-index
Z-index (Z-인덱스)
저수준(low-level) z-index 유틸리티로 요소나 컴포넌트의 쌓임 순서(stack level)를 빠르게 바꾸는 방법에 대해 알아봅니다.
출처: 문서
본문
예시 (Example)
z-index 유틸리티로 요소들을 서로 위에 쌓을 수 있습니다. static이 아닌 position 값이 필요하며, 이는 사용자 정의 스타일이나 position 유틸리티로 설정할 수 있습니다.
참고: 이들을 "저수준(low-level)" z-index 유틸리티라 부르는 이유는 기본 값이 -1부터 3까지이기 때문이며, 이 값들은 겹치는 컴포넌트의 레이아웃에 사용됩니다. 높은 수준의 z-index 값은 modal이나 tooltip 같은 오버레이 컴포넌트에 사용됩니다.
<div class="z-3 position-absolute p-5 rounded-3"><span>z-3</span></div>
<div class="z-2 position-absolute p-5 rounded-3"><span>z-2</span></div>
<div class="z-1 position-absolute p-5 rounded-3"><span>z-1</span></div>
<div class="z-0 position-absolute p-5 rounded-3"><span>z-0</span></div>
<div class="z-n1 position-absolute p-5 rounded-3"><span>z-n1</span></div>
오버레이 (Overlays)
Bootstrap의 오버레이 컴포넌트들—dropdown, modal, offcanvas, popover, toast, tooltip—은 각각 고유한 z-index 값을 가지며, 경쟁하는 인터페이스 "레이어" 사이에서 쓸 만한 경험을 보장합니다.
이에 대한 내용은 z-index 레이아웃 페이지에서 확인하세요.
컴포넌트 접근 방식 (Component approach)
일부 컴포넌트에서는 서로 겹치는 반복 요소(버튼 그룹의 버튼이나 리스트 그룹의 아이템 같은 것)를 관리하기 위해 저수준 z-index 값을 사용합니다.
우리의 z-index 접근 방식에 대해 알아보세요.
CSS
Sass map
이 Sass map을 사용자 정의해 사용 가능한 값과 생성되는 유틸리티를 변경할 수 있습니다.
scss/_variables.scss
$zindex-levels: (
n1: -1,
0: 0,
1: 1,
2: 2,
3: 3
);
Sass utilities API
position 유틸리티는 scss/_utilities.scss의 utilities API에 선언되어 있습니다. utilities API 사용법을 알아보세요.
scss/_utilities.scss
"z-index": (
property: z-index,
class: z,
values: $zindex-levels,
)