índice Z
Si bien no forman parte del sistema de cuadrícula de Bootstrap, los índices z juegan un papel importante en la forma en que nuestros componentes se superponen e interactúan entre sí.
Varios componentes de Bootstrap utilizan z-index, la propiedad CSS que ayuda a controlar el diseño al proporcionar un tercer eje para organizar el contenido. Utilizamos una escala de índice z predeterminada en Bootstrap que ha sido diseñada para capas de navegación, información sobre herramientas y ventanas emergentes, modales y más.
Estos valores más altos comienzan en un número arbitrario, lo suficientemente alto y específico para evitar idealmente conflictos. Necesitamos un conjunto estándar de estos en todos nuestros componentes en capas (información sobre herramientas, ventanas emergentes, barras de navegación, menús desplegables, modales) para que podamos ser razonablemente consistentes en los comportamientos. No hay motivo por el que no hayamos podido usar 100+ o 500+.
No fomentamos la personalización de estos valores individuales; si cambia uno, es probable que necesite cambiarlos 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 manejar los bordes superpuestos dentro de los componentes (p. ej., botones e entradas en grupos de entrada), usamos z-indexvalores bajos de un solo dígito de 1, 2y 3para estados predeterminados, de desplazamiento y activos. Al pasar el mouse/enfocar/activar, traemos un elemento particular al frente con un z-indexvalor más alto para mostrar su borde sobre los elementos hermanos.