Z-index
Hoewel z-indexen geen onderdeel zijn van het grid-systeem van Bootstrap, spelen ze een belangrijke rol in hoe onze componenten over elkaar liggen en op elkaar inwerken.
Verschillende Bootstrap-componenten maken gebruik van z-index, de CSS-eigenschap die helpt de layout te sturen door een derde as te bieden om content te ordenen. We hanteren in Bootstrap een standaard z-index-schaal die is ontworpen om navigatie, tooltips en popovers, modals en meer netjes te laten stapelen.
Deze hogere waarden beginnen bij een willekeurig getal dat hoog en specifiek genoeg is om conflicten idealiter te vermijden. We hebben een standaardset hiervan nodig voor onze gelaagde componenten — tooltips, popovers, navbars, dropdowns, modals — zodat we redelijk consistent kunnen zijn in het gedrag. Er is geen reden waarom we niet 100+ of 500+ hadden kunnen gebruiken.
We raden aanpassing van deze individuele waarden af; als je er één wijzigt, moet je ze waarschijnlijk allemaal wijzigen.
Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.
Om overlappende randen binnen componenten af te handelen (bijv. knoppen en inputs in input groups) gebruiken we lage eencijferige z-index-waarden van 1, 2 en 3 voor de standaard-, hover- en active-state. Bij hover/focus/active brengen we een bepaald element naar voren met een hogere z-index-waarde, zodat hun rand boven de aangrenzende elementen wordt getoond.