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

مثال

استخدم أدوات z-index لتكديس العناصر فوق بعضها البعض. يتطلب ذلك قيمة position غير static، والتي يمكن تعيينها باستخدام أنماط مخصصة أو باستخدام أدوات تحديد الموقع (position utilities).

<div class="z-3 position-absolute p-5 rounded-3"><span>z-3</span></div>
<div class="z-2 position-absolute p-5 rounded-3"><span>z-2</span></div>
<div class="z-1 position-absolute p-5 rounded-3"><span>z-1</span></div>
<div class="z-0 position-absolute p-5 rounded-3"><span>z-0</span></div>
<div class="z-n1 position-absolute p-5 rounded-3"><span>z-n1</span></div>

التراكبات (Overlays)

تمتلك مكونات التراكب في Bootstrap — القوائم المنسدلة (dropdown)، والنوافذ المنبثقة (modal)، والقوائم الجانبية (offcanvas)، والنوافذ المنبثقة الصغيرة (popover)، والتنبيهات (toast)، وتلميحات الأدوات (tooltip) — جميعها قيم z-index خاصة بها لضمان تجربة استخدام جيدة مع "طبقات" الواجهة المتنافسة.

اقرأ عنها في صفحة تخطيط z-index.

نهج المكونات (Component approach)

في بعض المكونات، نستخدم قيم z-index منخفضة المستوى لإدارة العناصر المتكررة التي تتداخل مع بعضها البعض (مثل الأزرار في مجموعة الأزرار أو العناصر في مجموعة القوائم).

تعرف على نهج z-index الخاص بنا.

الـ (CSS)

خرائط الـ (Sass)

قم بتخصيص خريطة (map) الـ Sass هذه لتغيير القيم المتاحة والأدوات التي يتم إنشاؤها.

$zindex-levels: (
  n1: -1,
  0: 0,
  1: 1,
  2: 2,
  3: 3
);

واجهة برمجة تطبيقات أدوات Sass (Sass utilities API)

يتم التصريح عن أدوات تحديد الموقع في واجهة برمجة تطبيقات الأدوات (utilities API) الخاصة بنا في scss/_utilities.scss. تعلم كيفية استخدام واجهة برمجة تطبيقات الأدوات.

"z-index": (
  property: z-index,
  class: z,
  values: $zindex-levels,
)