Z-indeksi

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;

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.