Í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;

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.