Z-indeks
Selv om det ikke er en del av Bootstraps rutenettsystem, spiller z-indekser en viktig rolle i hvordan komponentene våre overlapper og samhandler med hverandre.
Flere Bootstrap-komponenter bruker z-index, CSS-egenskapen som hjelper til med å kontrollere layout ved å tilby en tredje akse for å arrangere innhold. Vi bruker en standard z-indeksskala i Bootstrap som er utformet for riktig lagnavigasjon, verktøytips og popovers, modaler og mer.
Disse høyere verdiene starter på et vilkårlig tall, høye og spesifikke nok til å ideelt sett unngå konflikter. Vi trenger et standardsett med disse på tvers av de lagdelte komponentene våre – verktøytips, popovers, navbarer, rullegardiner, modaler – slik at vi kan være rimelig konsekvente i oppførselen. Det er ingen grunn til at vi ikke kunne ha brukt 100+ eller 500+.
Vi oppfordrer ikke til tilpasning av disse individuelle verdiene; bør du endre en, må du sannsynligvis endre dem alle.
$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;
For å håndtere overlappende grenser innenfor komponenter (f.eks. knapper og innganger i inngangsgrupper), bruker vi lave enkeltsifrede z-indexverdier på 1, 2, og 3for standard, hover og aktive tilstander. På hover/fokus/aktiv bringer vi et bestemt element i forgrunnen med en høyere z-indexverdi for å vise grensen deres over søskenelementene.