Indice Z
Bien qu'ils ne fassent pas partie du système de grille de Bootstrap, les index z jouent un rôle important dans la façon dont nos composants se superposent et interagissent les uns avec les autres.
Plusieurs composants Bootstrap utilisent z-index, la propriété CSS qui permet de contrôler la mise en page en fournissant un troisième axe pour organiser le contenu. Nous utilisons une échelle d'index z par défaut dans Bootstrap qui a été conçue pour superposer correctement la navigation, les info-bulles et les popovers, les modaux, etc.
Ces valeurs plus élevées commencent à un nombre arbitraire, suffisamment élevé et spécifique pour idéalement éviter les conflits. Nous avons besoin d'un ensemble standard de ceux-ci dans nos composants en couches - info-bulles, popovers, barres de navigation, listes déroulantes, modaux - afin que nous puissions être raisonnablement cohérents dans les comportements. Il n'y a aucune raison pour laquelle nous n'aurions pas pu utiliser 100+ ou 500+.
Nous n'encourageons pas la personnalisation de ces valeurs individuelles ; si vous en changez un, vous devrez probablement tous les changer.
$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;
Pour gérer les bordures qui se chevauchent dans les composants (par exemple, les boutons et les entrées dans les groupes d'entrées), nous utilisons des z-indexvaleurs faibles à un chiffre de 1, 2et 3pour les états par défaut, survolé et actif. Sur hover/focus/active, nous apportons un élément particulier au premier plan avec une z-indexvaleur plus élevée pour montrer leur bordure sur les éléments frères.