Saltar al contingut principal Saltar a la navegació de documents
in English

Índex Z

Tot i que no formen part del sistema de quadrícula de Bootstrap, els índexs z tenen un paper important en com els nostres components es superposen i interactuen entre ells.

Diversos components Bootstrap utilitzen z-index, la propietat CSS que ajuda a controlar el disseny proporcionant un tercer eix per organitzar el contingut. Utilitzem una escala d'índex z predeterminada a Bootstrap que s'ha dissenyat per a la navegació en capes, consells sobre eines i popovers, modals i molt més.

Aquests valors més alts comencen en un nombre arbitrari, prou alt i específic per evitar conflictes idealment. Necessitem un conjunt estàndard d'aquests en els nostres components en capes: informació sobre eines, popovers, barres de navegació, menús desplegables, modalitats, perquè puguem ser raonablement coherents en els comportaments. No hi ha cap motiu pel qual no haguéssim pogut utilitzar 100+ o 500+.

No fomentem la personalització d'aquests valors individuals; si en canvieu un, probablement haureu de canviar-los tots.

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-modal-backdrop:             1040;
$zindex-offcanvas:                  1050;
$zindex-modal:                      1060;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;

Per gestionar les vores superposades dins dels components (p. ex., botons i entrades en grups d'entrada), utilitzem z-indexvalors baixos d'un dígit de 1, 2, i 3per als estats predeterminats, desplaçaments i actius. En passar el cursor/enfocar/actiu, portem un element particular al primer pla amb un z-indexvalor més alt per mostrar la seva vora sobre els elements germans.