Z-index
Bár a z-indexek nem részei a Bootstrap rácsrendszerének, fontos szerepet játszanak abban, hogy összetevőink hogyan fedik egymást, és hogyan hatnak egymásra.
Számos Bootstrap komponens használja z-indexa CSS tulajdonságot, amely segít az elrendezés szabályozásában, mivel egy harmadik tengelyt biztosít a tartalom elrendezéséhez. A Bootstrap alapértelmezett z-index skáláját használjuk, amelyet úgy terveztek, hogy megfelelően rétegezze a navigációt, az eszköztippeket és az előugró ablakokat, a modálisokat és egyebeket.
Ezek a magasabb értékek tetszőleges számmal kezdődnek, magasak és elég specifikusak ahhoz, hogy ideális esetben elkerüljék a konfliktusokat. Ezek szabványos készletére van szükségünk a réteges összetevőinkben – eszköztippek, felugró ablakok, navigációs sávok, legördülő menük, módozatok –, hogy ésszerűen következetesek legyünk a viselkedésben. Semmi oka annak, hogy ne használhattuk volna a 100+ vagy a 500+ jelet.
Nem ösztönözzük ezen egyéni értékek testreszabását; Ha valamelyiket megváltoztatja, valószínűleg mindegyiket meg kell változtatnia.
$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;
Az összetevőkön belüli átfedő szegélyek (pl. gombok és bemenetek bemeneti csoportokban) kezeléséhez alacsony egyjegyű z-index, 1, 2és 3alapértelmezett, lebegő és aktív állapotokat használunk. A lebegés/fókusz/aktív beállításnál egy adott elemet előtérbe hozunk magasabb z-indexértékkel, hogy megmutassuk a határát a testvérelemek felett.