Í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-modal-backdrop: 1040;
$zindex-offcanvas: 1050;
$zindex-modal: 1060;
$zindex-popover: 1070;
$zindex-tooltip: 1080;
Para xestionar bordos superpostos dentro dos compoñentes (por exemplo, botóns e entradas en grupos de entrada), usamos z-index
valores baixos dun só díxito de 1
, 2
, e 3
para os estados predeterminados, de paso e activos. En pasar o rato/enfoque/activo, levamos un elemento particular á primeira liña cun z-index
valor máis alto para mostrar o seu bordo sobre os elementos irmáns.