v5.3에 추가됨

Z-index

저수준의 z-index 유틸리티를 사용하여 요소 또는 컴포넌트의 스택 레벨을 빠르게 변경할 수 있습니다.

예제

z-index 유틸리티를 사용하여 요소를 서로 겹치게 쌓을 수 있습니다. 사용자 지정 스타일을 사용하거나 위치 유틸리티를 사용하여 static 이외의 position 값을 설정해야 합니다.

이러한 “저수준” z-index 유틸리티는 기본값이 -1부터 3까지이며, 겹쳐진 구성 요소의 레이아웃에 사용합니다. 고수준 z-index 값은 모달 및 툴팁과 같은 오버레이 구성 요소에 사용됩니다.

z-3

z-2

z-1

z-0

z-n1

html

<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>

오버레이

Bootstrap 오버레이 구성 요소인 드롭다운, 모달, 오프캔버스, 팝오버, 토스트 및 툴팁은 각각 고유한 z-index 값을 가지고 있어 인터페이스의 경쟁하는 “레이어"에서 사용 가능한 경험을 보장합니다.

z-index 레이아웃 페이지에서 자세히 읽어보세요.

컴포넌트 접근 방식

일부 컴포넌트에서는 저수준의 z-index 값을 사용하여 버튼 그룹의 버튼이나 목록 그룹의 항목과 같이 서로 겹치는 반복 요소를 관리합니다.

z-index 접근 방식에 대해 자세히 알아보세요.

CSS

Sass 맵

이 Sass 맵을 사용하여 사용 가능한 값 및 생성된 유틸리티를 변경할 수 있습니다.

scss/_variables.scss

$zindex-levels: (
  n1: -1,
  0: 0,
  1: 1,
  2: 2,
  3: 3
);

Sass 유틸리티 API

위치 유틸리티는 scss/_utilities.scss의 유틸리티 API에 선언되어 있습니다. 유틸리티 API 사용 방법을 알아보세요.

scss/_utilities.scss

"z-index": (
  property: z-index,
  class: z,
  values: $zindex-levels,
)