Z-index
Även om det inte är en del av Bootstraps rutsystem, spelar z-index en viktig roll i hur våra komponenter överlappar och interagerar med varandra.
Flera Bootstrap-komponenter använder z-index, CSS-egenskapen som hjälper till att kontrollera layouten genom att tillhandahålla en tredje axel för att ordna innehåll. Vi använder en standard z-indexskala i Bootstrap som har utformats för korrekt lagernavigering, verktygstips och popovers, modaler och mer.
Dessa högre värden börjar på ett godtyckligt antal, tillräckligt höga och specifika för att helst undvika konflikter. Vi behöver en standarduppsättning av dessa över våra lagerkomponenter – verktygstips, popovers, navigeringsfält, rullgardinsmenyer, modaler – så att vi kan vara någorlunda konsekventa i beteendet. Det finns ingen anledning till att vi inte kunde ha använt 100+ eller 500+.
Vi uppmuntrar inte anpassning av dessa individuella värden; skulle du ändra en måste du förmodligen ändra dem alla.
$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;
För att hantera överlappande gränser inom komponenter (t.ex. knappar och ingångar i indatagrupper), använder vi låga ensiffriga z-indexvärden på 1, 2, och 3för standard, hovra och aktiva tillstånd. På hover/focus/active, tar vi ett särskilt element till förgrunden med ett högre z-indexvärde för att visa deras gräns över syskonelementen.