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 par un nombre arbitraire, suffisamment élevé et spécifique pour idéalement éviter les conflits. Nous avons besoin d'un ensemble standard de ces éléments 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 valeurs z-index à un seul chiffre de 1, 2 et 3 pour les états par défaut, survolé et actif. Sur hover/focus/active, nous apportons un élément particulier au premier plan avec une valeur z-index plus élevée pour montrer leur bordure sur les éléments frères.