Tailwind CSS • المستوى الثاني • الدرس 3

تموضع العناصر والطبقات (Positioning, Z-Index & Sticky)

أهداف الدرس

استخدام relative و absolute لتعويم الشارات والأيقونات.
تثبيت القوائم بـ sticky أو fixed مع التحكم في ترتيب الطبقات.
التحكم في أولوية العرض بـ z-0, z-10, z-20, z-50.
تحديد المواقع بدقة باستخدام top-*, left-*, right-*, bottom-*.

1. التحكم بالتموضع المترابط

عند إعطاء الحاوية الأب كلاس relative، يمكنك تحريك أي عنصر ابن يحمل كلاس absolute بدقة متناهية بالنسبة لحدود الحاوية باستخدام top-*، left-*، right-*، أو bottom-*.

html

<!-- النمط الأساسي للتعويم -->
<div class="relative">  <!-- الأب: مرجع للتموضع -->
  <span class="absolute top-3 right-3 z-10">
    شارة عائمة
  </span>
</div>

<!-- شريط ملتصق (Sticky) -->
<div class="h-48 overflow-y-auto">
  <div class="sticky top-0 bg-sky-500 z-20">
    شريط ملتصق أعلى
  </div>
  <p>المحتوى المتحرك...</p>
</div>

<!-- تداخل الطبقات -->
<div class="relative">
  <div class="absolute z-0">تحت</div>
  <div class="absolute z-10">فوق</div>
</div>

2. مرجع كلاسات التموضع

Position

static — الافتراضي
relative — نسبي (مرجع)
absolute — مطلق (يخرج من التدفق)
fixed — ثابت على الشاشة
sticky — التصاق عند التمرير

Edges

top-0 — أعلى الحاوية
top-3 — 12px من الأعلى
left-3 — 12px من اليسار
right-3 — 12px من اليمين
bottom-3 — 12px من الأسفل
inset-0 — ملء الحاوية

Z-Index

z-0 — طبقة أساسية
z-10 — فوق الأساس
z-20 — أعلى
z-50 — أعلى قيمة
z-auto — ترتيب تلقائي

حالات الاستخدام

Badge عائم على بطاقة
Header ملتصق أعلى الصفحة
Modal فوق المحتوى
Tooltip منبثق

3. الفرق بين sticky و fixed

sticky

يلتصق عندما يصل إلى الموضع المحدد أثناء التمرير، ويبقى داخل حدود الأب. مثالي لشريط الجدول الرأسي.

fixed

ثابت على الشاشة دائماً حتى عند التمرير، ويخرج من تدفق الصفحة. مثالي لشريط التنقل الرئيسي.

التطبيق العملي المباشر

تحدي الدرس الثالث: إتقان التموضع والطبقات

قم بالتعديل على الكود بداخل المحرر أدناه لتطبيق المتطلبات التالية:

غيّر موضع الشارة في البطاقة الأولى من left-3 إلى right-3.
أضف space-y-6 p-4 للحاوية الرئيسية (بعد إضافة div خارجي).
أضف بطاقة ثانية تحتوي على شارة زمردية في الأسفل يسار بـ bottom-3 left-3 bg-emerald-500.
أضف صندوق تمرير بـ h-48 overflow-y-auto يحتوي على شريط sticky top-0 bg-sky-500 z-20.
أضف صندوق تداخل الطبقات relative h-32 يحتوي على مربعين: الأول بـ z-0 (أزرق) والثاني بـ z-10 (بنفسجي).
احتفظ بكلاسات الشارة الأصلية (text-xs font-bold px-2.5 py-1 rounded-full shadow-md).

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للدرس الرابع