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.