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, для показа его границы над соседними элементами.