Índice Z
Embora não façam parte do sistema de grade do Bootstrap, os z-indexes desempenham um papel importante na forma como nossos componentes se sobrepõem e interagem uns com os outros.
Vários componentes do Bootstrap utilizam z-index, a propriedade CSS que ajuda a controlar o layout fornecendo um terceiro eixo para organizar o conteúdo. Utilizamos uma escala de índice z padrão no Bootstrap que foi projetada para a navegação em camadas, dicas de ferramentas e popovers, modais e muito mais.
Esses valores mais altos começam em um número arbitrário, alto e específico o suficiente para evitar conflitos. Precisamos de um conjunto padrão deles em nossos componentes em camadas - dicas de ferramentas, popovers, navbars, menus suspensos, modais - para que possamos ser razoavelmente consistentes nos comportamentos. Não há razão para não termos usado 100+ ou 500+.
Não incentivamos a personalização desses valores individuais; se você alterar um, provavelmente precisará alterar todos eles.
$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;
Para lidar com bordas sobrepostas dentro de componentes (por exemplo, botões e entradas em grupos de entrada), usamos z-indexvalores baixos de um dígito de 1, 2e 3para estados padrão, flutuante e ativo. Em hover/focus/active, trazemos um elemento específico para a frente com um z-indexvalor mais alto para mostrar sua borda sobre os elementos irmãos.