التموضع: relative، absolute، fixed، sticky، z-index

ثبّت الشارات والرؤوس والنوافذ المنبثقة بالضبط حيث تريد، باستخدام مواضع CSS وسلّم z-index محكم الإدارة.

8 دقيقة · 3 أسئلة

افتراضياً، كل عنصر هو position: static ويتبع تدفّق المستند. ولـ position: relative استخدامان: إزاحة عنصر إزاحة طفيفة دون إزعاج جيرانه، وقبل كل شيء العمل كمرجع للأبناء ذوي position: absolute. إنه أكثر أنماط التموضع شيوعاً: شارة عرض، أو تلميحة، أو أيقونة مثبّتة في زاوية من أبيها.

.product-card {
  position: relative;
}

.promo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

يثبّت position: fixed عنصراً على منفذ العرض، بصرف النظر عن التمرير: شريط ملفات تعريف الارتباط، زر العودة إلى الأعلى. أما position: sticky فهجين: يمرّر العنصر تمريراً طبيعياً مع الصفحة، ثم يثبت في مكانه بمجرد بلوغه العتبة التي تحدّدها (مثلاً top: 0). إنه الحل الحديث للرؤوس التي تبقى ظاهرة.

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
}

عندما تتداخل العناصر، يقرّر z-index أيّها يعلو الآخر - لكن للعناصر المتموضعة فقط. اعتمِد سلّماً موثَّقاً بدلاً من قيم عشوائية: 10 للقوائم المنسدلة، و100 للرأس، و1000 للنوافذ المنبثقة. انتبه: أبٌ ينشئ سياق تكديس خاصاً به (مثلاً بقيمة opacity أقل من 1) يقيّد z-index جميع أبنائه.

.dropdown {
  z-index: 10;
}

.site-header {
  z-index: 100;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. بالنسبة إلى ماذا يتموضع عنصر position: absolute؟
   • دائماً بالنسبة إلى نافذة المتصفّح
   • بالنسبة إلى أقرب سلف متموضع، وإلا فبالنسبة إلى منفذ العرض
   • بالنسبة إلى أبيه المباشر، أياً كان موضعه
2. ما الفرق بين fixed وsticky؟
   • يبقى fixed مثبَّتاً على الشاشة دائماً، بينما لا يثبت sticky في مكانه إلا اعتباراً من عتبة تمرير
   • يُصيَّر sticky أسرع من fixed
   • لا فرق، فهما مترادفان
3. لماذا قد لا يكون لـ z-index: 999 أيّ أثر؟
   • لأن القيمة القصوى المسموح بها هي 100
   • لأن العنصر غير متموضع، أو محبوس في سياق تكديس أدنى
   • لأن z-index لا يعمل إلا مع Grid