Z-index

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.