Z-index
Aunque no forman parte del sistema de cuadrícula de Bootstrap, los z-index juegan un papel importante en cómo 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 z-index predeterminada en Bootstrap que ha sido diseñada para superponer correctamente la navegación, los tooltips y popovers, los modals y más.
Estos valores más altos comienzan en un número arbitrario, lo suficientemente alto y específico como para evitar conflictos de manera ideal. Necesitamos un conjunto estándar de estos en nuestros componentes superpuestos (tooltips, popovers, navbars, dropdowns, modals) para que podamos ser razonablemente consistentes en los comportamientos. No hay razón por la que no hayamos podido usar 100+ o 500+.
No fomentamos la personalización de estos valores individuales; si cambias uno, probablemente necesites 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 bordes superpuestos dentro de los componentes (por ejemplo, botones y entradas en grupos de entrada), usamos valores de z-index bajos de un solo dígito de 1, 2 y 3 para los estados predeterminado, hover y activo. Al pasar el cursor/enfocar/activar, traemos un elemento en particular al frente con un valor de z-index más alto para mostrar su borde sobre los elementos hermanos.