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-modal-backdrop:             1040;
$zindex-offcanvas:                  1050;
$zindex-modal:                      1060;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;

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.