Z-індекс
Хоча z-індекси не є частиною сітки Bootstrap, вони відіграють важливу роль у тому, як наші компоненти накладаються та взаємодіють один з одним.
Кілька компонентів Bootstrap використовують z-indexвластивість CSS, яка допомагає контролювати макет, надаючи третю вісь для впорядкування вмісту. Ми використовуємо шкалу z-індексу за замовчуванням у Bootstrap, яка була розроблена для належної навігації, підказок і спливаючих вікон, модальних елементів тощо.
Ці вищі значення починаються з довільного числа, достатньо високого та конкретного, щоб ідеально уникнути конфліктів. Нам потрібен стандартний набір цих елементів для наших багатошарових компонентів — підказок, спливаючих вікон, навігаційних панелей, спадних меню, модальних — щоб ми могли бути достатньо послідовними у поведінці. Немає причин, чому ми не могли б використати 100+ або 500+.
Ми не заохочуємо налаштування цих індивідуальних значень; якщо ви зміните один, вам, швидше за все, доведеться змінити їх усі.
$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;
Для обробки меж компонентів, що перекриваються (наприклад, кнопок і входів у групах вводу), ми використовуємо низькі однозначні z-indexзначення 1, 2і 3для станів за замовчуванням, наведення та активного стану. При наведенні/фокусуванні/активності ми виводимо певний елемент на передній план із вищим z-indexзначенням, щоб показати його межу над однотипними елементами.