Indice Z

Sebbene non facciano parte del sistema di griglia di Bootstrap, gli z-index svolgono un ruolo importante nel modo in cui i nostri componenti si sovrappongono e interagiscono tra loro.

Diversi componenti Bootstrap utilizzano z-index, la proprietà CSS che aiuta a controllare il layout fornendo un terzo asse per organizzare il contenuto. Utilizziamo una scala z-index predefinita in Bootstrap che è stata progettata per sovrapporre correttamente navigazione, descrizioni comandi e popover, modali e altro ancora.

Questi valori più alti iniziano con un numero arbitrario, alto e sufficientemente specifico da evitare idealmente i conflitti. Abbiamo bisogno di un insieme standard di questi componenti a più livelli (descrizione comandi, popover, barre di navigazione, menu a discesa, modali) in modo da poter essere ragionevolmente coerenti nei comportamenti. Non c'è motivo per cui non avremmo potuto usare 100+ o 500+.

Non incoraggiamo la personalizzazione di questi valori individuali; se dovessi cambiarne uno, probabilmente dovrai cambiarli tutti.

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

Per gestire i bordi sovrapposti all'interno dei componenti (ad es. pulsanti e input nei gruppi di input), utilizziamo z-indexvalori bassi a una cifra di 1, 2, e 3per gli stati predefiniti, al passaggio del mouse e attivi. Al passaggio del mouse/focus/attivo, portiamo in primo piano un elemento particolare con un z-indexvalore più alto per mostrare il loro confine sugli elementi fratelli.