Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
Check
in English

Z-index

Och wann net en Deel vum Bootstrap's Gittersystem ass, spillen z-Indexen e wichtege Bestanddeel a wéi eis Komponenten iwwerlageren a matenee interagéieren.

Verschidde Bootstrap Komponenten benotzen z-index, d'CSS Eegeschafte déi hëlleft de Layout ze kontrolléieren andeems se eng drëtt Achs ubidden fir Inhalt ze arrangéieren. Mir benotzen eng Standard Z-Index Skala am Bootstrap déi entwéckelt ass fir richteg Layer Navigatioun, Tooltips a Popovers, Modalen, a méi.

Dës méi héich Wäerter fänken un enger arbiträrer Zuel un, héich a spezifesch genuch fir ideal Konflikter ze vermeiden. Mir brauchen e Standard-Set vun dësen iwwer eis Layer-Komponenten - Tooltips, Popovers, Navbars, Dropdowns, Modals - sou datt mir raisonnabel konsequent an de Verhalen kënne sinn. Et gëtt kee Grond datt mir 100+ oder 500+ net konnten benotzen.

Mir encouragéieren keng Personnalisatioun vun dësen individuellen Wäerter; sollt Dir een änneren, Dir musst wahrscheinlech se all änneren.

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

Fir iwwerlappend Grenzen bannent Komponenten ze handhaben (zB Knäppercher an Inputen an Inputgruppen), benotze mir niddereg Eenzifferwäerter z-indexvun 1, 2, a 3fir Standard-, Hover- an aktive Staaten. Op Hover / Focus / Active brénge mir e bestëmmten Element op d'Spëtzt mat engem méi héije z-indexWäert fir hir Grenz iwwer d'Geschwësterelementer ze weisen.