Z-index
Aunque no son parte del sistema de grid 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 layout proporcionando un tercer eje para organizar el contenido. Utilizamos una escala de z-index
predeterminada en Bootstrap que ha sido diseñada para superponer adecuadamente la navegación, tooltips y
popovers, modales y más.
Estos valores más altos comienzan en un número arbitrario, lo suficientemente alto y
específico para evitar conflictos de manera ideal. Necesitamos un conjunto estándar de estos en nuestros
componentes superpuestos—tooltips, popovers, navbars, dropdowns, modales—para poder ser razonablemente
consistentes en los comportamientos. No hay razón por la que no podríamos haber usado 100+ o
500+.
No recomendamos personalizar estos valores individuales; si cambias uno, probablemente necesites cambiarlos 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 manejar bordes superpuestos dentro de los componentes (ej., botones e inputs en grupos
de input), usamos valores de z-index de un solo dígito bajo de 1, 2 y
3 para los estados predeterminado, hover y active. En hover/focus/active, traemos un elemento
particular al frente con un valor de z-index más alto para mostrar su borde sobre los elementos
hermanos.