Z-indeks
Selvom det ikke er en del af Bootstraps gittersystem, spiller z-indekser en vigtig rolle i, hvordan vores komponenter overlapper og interagerer med hinanden.
Adskillige Bootstrap-komponenter bruger z-index, CSS-egenskaben, der hjælper med at kontrollere layoutet ved at give en tredje akse til at arrangere indhold. Vi bruger en standard z-indeksskala i Bootstrap, der er designet til korrekt lagnavigation, værktøjstip og popovers, modaler og mere.
Disse højere værdier starter ved et vilkårligt tal, højt og specifikt nok til ideelt set at undgå konflikter. Vi har brug for et standardsæt af disse på tværs af vores lagdelte komponenter – værktøjstip, popovers, navbarer, dropdowns, modaler – så vi kan være rimelig konsekvente i adfærden. Der er ingen grund til, at vi ikke kunne have brugt 100+ eller 500+.
Vi opfordrer ikke til tilpasning af disse individuelle værdier; skulle du ændre en, skal du sandsynligvis ændre dem alle.
$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;
For at håndtere overlappende grænser inden for komponenter (f.eks. knapper og input i inputgrupper), bruger vi lave enkeltcifrede z-indexværdier af 1, 2, og 3som standard, hover og aktive tilstande. På hover/focus/active bringer vi et bestemt element i forgrunden med en højere z-indexværdi for at vise deres grænse over søskendeelementerne.