Z-index
Z-index
Bootstrap의 그리드 시스템의 일부는 아니지만, z-index는 컴포넌트가 서로 어떻게 겹치고 상호작용하는지에서 중요한 역할을 해요.
출처: 문서
본문
여러 Bootstrap 컴포넌트는 콘텐츠를 배치할 때 세 번째 축을 제공해서 레이아웃을 제어하는 CSS 속성인 z-index를 활용해요. Bootstrap은 네비게이션, 툴팁과 팝오버, 모달 등을 제대로 겹치도록 설계된 기본 z-index 스케일을 제공해요.
이 높은 값들은 충돌을 피하도록 충분히 높고 구체적인 임의의 숫자에서 시작해요. 겹치는 컴포넌트들(툴팁, 팝오버, 내비바, 드롭다운, 모달) 전반에 걸쳐 일관된 동작을 위해 공통 기준 세트가 필요해요. 100+나 500+를 쓰지 않을 이유는 없어요.
이 개별 값들의 커스터마이즈는 권장하지 않아요. 하나를 바꾸면 아마 전부 다 바꿔야 할 테니까요.
$zindex-dropdown: 1000;
$zindex-sticky: 1020;
$zindex-fixed: 1030;
$zindex-offcanvas-backdrop: 1040;
$zindex-offcanvas: 1045;
$zindex-modal-backdrop: 1050;
$zindex-modal: 1055;
$zindex-popover: 1070;
$zindex-tooltip: 1080;
$zindex-toast: 1090;
컴포넌트 내부의 겹치는 테두리를 다룰 때(예: input group 안의 버튼과 인풋)는 default, hover, active 상태에 대해 각각 낮은 한 자리 숫자의 z-index 값인 1, 2, 3을 사용해요. hover/focus/active 상태에서는 형제 요소 위로 테두리를 보여 주도록 더 높은 z-index 값으로 특정 요소를 맨 앞으로 가져와요.