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

z-index

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

Содержание

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

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