Перейти к основному контенту Перейти к навигации документации

Хотя z-index и не является частью системы сетки Bootstrap, z-индексы играют важную роль в том, как наши компоненты накладываются и взаимодействуют друг с другом.

Несколько компонентов Bootstrap используют z-index — CSS-свойство, которое помогает управлять макетом, предоставляя третью ось для размещения содержимого. Мы используем шкалу z-index по умолчанию в Bootstrap, которая разработана для правильного наслоения навигации, подсказок и поповеров, модальных окон и многого другого.

Эти более высокие значения начинаются с произвольного числа, достаточно высокого и специфичного, чтобы в идеале избежать конфликтов. Нам нужен стандартный набор этих значений для наших многослойных компонентов — подсказок, поповеров, навигационных панелей, выпадающих списков, модальных окон — чтобы мы могли быть достаточно последовательными в поведении. Нет никакой причины, по которой мы не могли бы использовать 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;

Для обработки перекрывающихся границ внутри компонентов (например, кнопок и полей ввода в группах ввода) мы используем низкие однозначные значения z-index 1, 2 и 3 для обычного, наведенного и активного состояний. При наведении/фокусировке/активации мы выносим определенный элемент на передний план с более высоким значением z-index, чтобы показать их границу поверх соседних элементов.