Z-index
Хотя z-индексы не являются частью системы сеток Bootstrap, но они играют важную роль в том, как наши компоненты накладываются и взаимодействуют друг с другом.
Некоторые компоненты Bootstrap используют индекс z-index, свойство CSS, которое помогает управлять макетом, с помощью третьей оси для упорядочивания содержимого. В Bootstrap используется «стандартный» Z-индекс, спроектированный для правильного расположения навигации, всплывающих подсказок, всплывающих окон и т.н. “modals” (pop-up окно наверху страницы).
Значения индекса могут начинаться с любого числа, в идеале достаточно большого и специфичного, чтобы избежать конфликтов. Нам нужен стандартный набор этих чисел для использования с нашими компонентами: всплывающими подсказками, окнами, навбарами, выпадающими элементами, модальными элементами - так, чтобы мы могли бы разумно стандартизировать их поведение. Не существует ограничений - используйте хоть 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;
Для того, чтобы эффективно обрабатывать перекрывающиеся границы внутри компонентов (например, кнопки и формы ввода в группах форм ввода), по умолчанию мы используем значения z-index 1,2,3, а также hover и "активные состояния". В hover/focus/active мы подводим частный элемент к "переднему краю" использованием более высокого z-index, для показа его границы над соседними элементами.