Índice Z

Aínda que non forman parte do sistema de cuadrícula de Bootstrap, os índices z xogan un papel importante na forma en que os nosos compoñentes se superpoñen e interactúan entre si.

Varios compoñentes de Bootstrap utilizan z-index, a propiedade CSS que axuda a controlar o deseño proporcionando un terceiro eixe para organizar o contido. Utilizamos unha escala de índice z predeterminada en Bootstrap que foi deseñada para crear capas de navegación, información sobre ferramentas e popovers, modais e moito máis.

Estes valores máis altos comezan nun número arbitrario, alto e o suficientemente específico como para evitar conflitos. Necesitamos un conxunto estándar destes nos nosos compoñentes en capas (suxestións de ferramentas, popovers, barras de navegación, menús despregables, modais) para que poidamos ser razoablemente consistentes nos comportamentos. Non hai razón pola que non puidésemos usar 100+ ou 500+.

Non fomentamos a personalización destes valores individuais; se cambias un, é probable que teñas que cambialos todos.

$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 xestionar bordos superpostos dentro dos compoñentes (por exemplo, botóns e entradas en grupos de entrada), usamos z-indexvalores baixos dun só díxito de 1, 2, e 3para os estados predeterminados, de paso e activos. En pasar o rato/enfoque/activo, levamos un elemento particular á primeira liña cun z-indexvalor máis alto para mostrar o seu bordo sobre os elementos irmáns.