الطبقات (Z-index)

تستخدم العديد من مكونات Bootstrap z-index، وهي خاصية في CSS تساعد في التحكم في التخطيط من خلال توفير محور ثالث لترتيب المحتوى. نحن نستخدم مقياساً افتراضياً للـ z-index في Bootstrap تم تصميمه لترتيب التنقل، والتلميحات (tooltips) والنوافذ المنبثقة (popovers)، والنوافذ المودالية (modals)، وغيرها بشكل صحيح.

تبدأ هذه القيم العالية من رقم تعسفي، مرتفع ومحدد بما يكفي لتجنب التعارضات بشكل مثالي. نحن بحاجة إلى مجموعة قياسية من هذه القيم عبر مكوناتنا ذات الطبقات — التلميحات، والنوافذ المنبثقة، وأشرطة التنقل، والقوائم المنسدلة، والنوافذ المودالية — حتى نتمكن من أن نكون متسقين بشكل معقول في السلوكيات. لا يوجد سبب يمنعنا من استخدام 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 للحالات الافتراضية، وعند التمرير (hover)، والحالات النشطة. عند التمرير/التركيز/النشاط، نقوم بجلب عنصر معين إلى المقدمة باستخدام قيمة z-index أعلى لإظهار حدوده فوق العناصر المجاورة.