Z-index

Hoci nie sú súčasťou mriežkového systému Bootstrapu, z-indexy zohrávajú dôležitú úlohu v tom, ako sa naše komponenty navzájom prekrývajú a interagujú.

Niekoľko komponentov Bootstrap využíva z-indexvlastnosť CSS, ktorá pomáha ovládať rozloženie tým, že poskytuje tretiu os na usporiadanie obsahu. V Bootstrape používame predvolenú mierku z-indexu, ktorá bola navrhnutá tak, aby správne vrstvila navigáciu, popisy a kontextové okná, modály a ďalšie.

Tieto vyššie hodnoty začínajú na ľubovoľnom čísle, dostatočne vysoké a špecifické, aby sa v ideálnom prípade zabránilo konfliktom. Potrebujeme ich štandardnú sadu v rámci našich vrstvených komponentov – popisy nástrojov, kontextové okná, navigačné panely, rozbaľovacie zoznamy, modály – aby sme mohli byť v správaní primerane konzistentní. Nie je dôvod, prečo by sme nemohli použiť 100+ alebo 500+.

Nepodporujeme prispôsobenie týchto individuálnych hodnôt; ak zmeníte jeden, pravdepodobne budete musieť zmeniť všetky.

$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;

Aby sme zvládli prekrývajúce sa hranice v rámci komponentov (napr. tlačidlá a vstupy vo vstupných skupinách), používame nízke jednociferné z-indexhodnoty 1, 2, a 3pre predvolené, visiace a aktívne stavy. Pri umiestnení kurzora myši/zameraní/aktívnej zobrazíme konkrétny prvok do popredia s vyššou z-indexhodnotou, aby sme ukázali jeho hranicu nad súrodeneckými prvkami.