Z-індекс

Кілька компонентів 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;

Для обробки меж компонентів, що перекриваються (наприклад, кнопок і входів у групах вводу), ми використовуємо низькі однозначні z-indexзначення 1, 2і 3для станів за замовчуванням, наведення та активного стану. При наведенні/фокусуванні/активності ми виводимо певний елемент на передній план із вищим z-indexзначенням, щоб показати його межу над однотипними елементами.