Z-index
Хотя z-индексы не являются частью системы сеток Bootstrap, но они играют важную роль в том, как наши компоненты накладываются и взаимодействуют друг с другом.
Некоторые компоненты Bootstrap используют z-index, свойство CSS, которое помогает управлять макетом, предоставляя третью ось для упорядочивания содержимого. Мы используем шкалу z-индекса по умолчанию в 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, чтобы показать их границу над соседними элементами.
