Z-индекс

Няколко компонента на Bootstrap използват z-indexCSS свойството, което помага за контролиране на оформлението чрез предоставяне на трета ос за подреждане на съдържанието. Ние използваме 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стойност, за да покажем границата му над елементите-роднини.