Z-index
Hoewel ze geen deel uitmaken van het rastersysteem van Bootstrap, spelen z-indexen een belangrijke rol in hoe onze componenten over elkaar heen liggen en met elkaar omgaan.
Verschillende Bootstrap-componenten gebruiken z-index, de CSS-eigenschap die de lay-out helpt regelen door een derde as te bieden om inhoud te rangschikken. We gebruiken een standaard z-indexschaal in Bootstrap die is ontworpen om navigatie, tooltips en popovers, modals en meer op de juiste manier te lagen.
Deze hogere waarden beginnen bij een willekeurig getal, hoog en specifiek genoeg om conflicten idealiter te vermijden. We hebben een standaardset hiervan nodig voor onze gelaagde componenten - tooltips, popovers, navigatiebalken, vervolgkeuzelijsten, modals - zodat we redelijk consistent kunnen zijn in het gedrag. Er is geen reden waarom we 100+ of 500+ niet hadden kunnen gebruiken.
We moedigen aanpassing van deze individuele waarden niet aan; als je er een verandert, moet je ze waarschijnlijk allemaal veranderen.
$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;
Om overlappende randen binnen componenten (bijv. knoppen en invoer in invoergroepen) af te handelen, gebruiken we lage eencijferige z-indexwaarden van 1, 2, en 3voor standaard-, zweef- en actieve statussen. Bij hover/focus/active brengen we een bepaald element naar de voorgrond met een hogere z-indexwaarde om hun grens over de zusterelementen te laten zien.