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;

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.