Z-Index
Z-Indizes sind zwar kein Teil des Rastersystems von Bootstrap, spielen aber eine wichtige Rolle dabei, wie sich unsere Komponenten überlagern und miteinander interagieren.
Mehrere Bootstrap-Komponenten verwenden z-index, die CSS-Eigenschaft, die bei der Steuerung des Layouts hilft, indem sie eine dritte Achse zum Anordnen von Inhalten bereitstellt. Wir verwenden eine Standard-Z-Index-Skala in Bootstrap, die entwickelt wurde, um Navigation, Tooltips und Popovers, Modals und mehr richtig zu schichten.
Diese höheren Werte beginnen bei einer beliebigen Zahl, die hoch und spezifisch genug ist, um Konflikte idealerweise zu vermeiden. Wir brauchen einen Standardsatz davon für unsere mehrschichtigen Komponenten – Tooltips, Popovers, Navigationsleisten, Dropdowns, Modals – damit wir in den Verhaltensweisen einigermaßen konsistent sein können. 100Es gibt keinen Grund, warum wir + oder + nicht hätten verwenden können 500.
Wir ermutigen nicht zur Anpassung dieser individuellen Werte; Sollten Sie einen ändern, müssen Sie wahrscheinlich alle ändern.
$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;
Um überlappende Grenzen innerhalb von Komponenten (z. B. Schaltflächen und Eingaben in Eingabegruppen) zu handhaben, verwenden wir niedrige einstellige z-indexWerte von 1, 2und 3für Standard-, Hover- und aktive Zustände. Bei Hover/Focus/Active bringen wir ein bestimmtes Element mit einem höheren z-indexWert in den Vordergrund, um seine Grenze zu den Geschwisterelementen anzuzeigen.