Indeks Z
Chociaż nie są częścią systemu siatek Bootstrap, indeksy Z odgrywają ważną rolę w tym, jak nasze komponenty nakładają się i współdziałają ze sobą.
Kilka składników Bootstrap wykorzystuje z-indexwłaściwość CSS, która pomaga kontrolować układ, udostępniając trzecią oś do rozmieszczania zawartości. Używamy domyślnej skali z-index w Bootstrap, która została zaprojektowana tak, aby prawidłowo nawigować warstwami, podpowiedziami i popoverami, modami i nie tylko.
Te wyższe wartości zaczynają się od dowolnej liczby, wystarczająco wysokiej i określonej, aby idealnie uniknąć konfliktów. Potrzebujemy standardowego zestawu tych elementów w naszych komponentach warstwowych — podpowiedzi, okienek popover, pasków nawigacyjnych, list rozwijanych, modów — abyśmy mogli zachować rozsądną spójność zachowań. Nie ma powodu, dla którego nie moglibyśmy użyć 100+ lub 500+.
Nie zachęcamy do dostosowywania tych indywidualnych wartości; jeśli zmienisz jeden, prawdopodobnie będziesz musiał zmienić je wszystkie.
$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;
Aby obsłużyć nakładające się granice w komponentach (np. przyciski i dane wejściowe w grupach wejściowych), używamy niskich jednocyfrowych z-indexwartości 1, 2oraz 3dla stanów domyślnych, najechania i aktywnych. Po najechaniu/fokusie/aktywności wysuwamy konkretny element na pierwszy plan z wyższą z-indexwartością, aby pokazać jego granicę nad elementami rodzeństwa.