Z-indeksi
Vaikka z-indeksit eivät kuulu Bootstrapin ruudukkojärjestelmään, ne ovat tärkeässä roolissa komponenttiemme päällekkäisyydessä ja vuorovaikutuksessa toistensa kanssa.
Useat Bootstrap-komponentit käyttävät z-indexCSS-ominaisuutta, joka auttaa hallitsemaan asettelua tarjoamalla kolmannen akselin sisällön järjestämiseen. Käytämme Bootstrapissa oletusarvoista z-indeksiasteikkoa, joka on suunniteltu tasoittamaan navigointi, työkaluvihjeet ja ponnahdusikkunat, modaalit ja paljon muuta.
Nämä korkeammat arvot alkavat mielivaltaisesta numerosta, korkeasta ja riittävän täsmällisestä välttääkseen ristiriidat. Tarvitsemme vakiojoukon näitä kerroksellisissa komponenteissamme – työkaluvihjeissä, ponnahdusikkunoissa, navigointipalkissa, pudotusvalikoissa, modaaleissa – jotta voimme olla kohtuullisen johdonmukaisia käyttäytymisessämme. Ei ole mitään syytä, miksi emme olisi voineet käyttää 100+ tai 500+.
Emme rohkaise räätälöimään näitä yksilöllisiä arvoja; Jos muutat yhden, sinun on todennäköisesti vaihdettava ne kaikki.
$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;
Käsittelemme päällekkäisiä rajoja komponenttien sisällä (esim. painikkeet ja tulot syöttöryhmissä) käytämme alhaisia yksinumeroisia z-indexarvoja 1, 2ja 3oletus-, hover- ja aktiivitiloissa. Kohdassa hover/focus/active tuomme tietyn elementin etualalle korkeammalla z-indexarvolla näyttääksemme sen reunan sisarelementtien yläpuolella.