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

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

Некоторые компоненты Bootstrap используют индекс z-index, свойство CSS, которое помогает управлять макетом, с помощью третьей оси для упорядочивания содержимого. В Bootstrap используется «стандартный» Z-индекс, спроектированный для правильного расположения навигации, всплывающих подсказок, всплывающих окон и т.н. “modals” (pop-up окно наверху страницы).

Значения индекса могут начинаться с любого числа, в идеале достаточно большого и специфичного, чтобы избежать конфликтов. Нам нужен стандартный набор этих чисел для использования с нашими компонентами: всплывающими подсказками, окнами, навбарами, выпадающими элементами, модальными элементами - так, чтобы мы могли бы разумно стандартизировать их поведение. Не существует ограничений - используйте хоть 100+, хоть 500+ и более.

Мы не советуем измененять эти значения самому, т.к. если потребуется изменить одно, придется менять все.

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

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