Z-인덱스

여러 부트스트랩 구성 요소 z-index는 콘텐츠를 정렬하는 세 번째 축을 제공하여 레이아웃을 제어하는 ​​데 도움이 되는 CSS 속성을 활용합니다. 탐색, 도구 설명 및 팝오버, 모달 등을 적절하게 계층화하도록 설계된 부트스트랩의 기본 z-인덱스 스케일을 사용합니다.

이러한 더 높은 값은 충돌을 이상적으로 피할 수 있을 만큼 충분히 높고 구체적인 임의의 숫자에서 시작합니다. 툴팁, 팝오버, 탐색 모음, 드롭다운, 모달 등 계층화된 구성 요소 전반에 걸쳐 이러한 표준 세트가 필요하므로 동작에서 합리적으로 일관성을 유지할 수 있습니다. 100+ 또는 + 를 사용하지 않을 이유가 없습니다 500.

우리는 이러한 개별 값의 사용자 지정을 권장하지 않습니다. 하나를 변경하면 모두 변경해야 할 수 있습니다.

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-modal-backdrop:             1040;
$zindex-offcanvas:                  1050;
$zindex-modal:                      1060;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;

구성 요소(예: 입력 그룹의 버튼 및 입력) 내에서 겹치는 테두리를 처리하기 위해 , 의 낮은 한 자리 z-index값을 사용 하고 기본 1, 호버 및 활성 상태에 대해 사용합니다. hover/focus/active에서 특정 요소를 더 높은 값으로 맨 앞으로 가져와 형제 요소 위에 테두리를 표시합니다.23z-index