Z-index
I když nejsou součástí gridového systému Bootstrapu, z-indexy hrají důležitou roli v tom, jak se naše komponenty překrývají a vzájemně se ovlivňují.
Několik komponent Bootstrap využívá z-indexvlastnost CSS, která pomáhá řídit rozložení tím, že poskytuje třetí osu pro uspořádání obsahu. V Bootstrapu používáme výchozí měřítko z-indexu, které bylo navrženo tak, aby správně vrstvilo navigaci, popisky a vyskakovací okna, modály a další.
Tyto vyšší hodnoty začínají na libovolném čísle, dostatečně vysoké a specifické, aby se v ideálním případě předešlo konfliktům. Potřebujeme standardní sadu těchto prvků napříč našimi vrstvenými komponentami – popisky, vyskakovací okna, navigační panely, rozevírací seznamy, modály – abychom mohli být v chování přiměřeně konzistentní. Není důvod, proč bychom nemohli použít 100+ nebo 500+.
Nepodporujeme přizpůsobení těchto individuálních hodnot; pokud změníte jeden, budete pravděpodobně muset změnit všechny.
$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;
Abychom zvládli překrývající se hranice v rámci komponent (např. tlačítka a vstupy ve vstupních skupinách), používáme nízké jednociferné z-indexhodnoty 1, 2, a 3pro výchozí stavy, přechod a aktivní stavy. Při hover/focus/active dáme konkrétní prvek do popředí s vyšší z-indexhodnotou, abychom ukázali jeho hranici nad sourozeneckými prvky.