شاخص Z

چندین مؤلفه Bootstrap از z-indexویژگی CSS استفاده می کنند که با ارائه یک محور سوم برای مرتب کردن محتوا به کنترل طرح بندی کمک می کند. ما از یک مقیاس پیش‌فرض z-index در 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مقدار بالاتر به خط مقدم می‌آوریم تا مرز آن‌ها را روی عناصر برادر نشان دهد.