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.