الدرس 3 من 8

التموضع

هدف الدرس

عنصر فوق عنصر

01

الشرح

القيمة position: absolute تُخرج العنصر من مكانه الطبيعي في الصفحة، وتحدّد موضعه بالنسبة إلى أقرب عنصر يحتويه وله تموضع، أي عنصر قيمة position فيه ليست static.

والحيلة كلّها أن تضع position: relative على العنصر الأب ليصير مرجعًا، ثم تضع absolute على الابن، فإن نسيت relative على الأب ذهب الابن إلى زاوية الصفحة.

واستعمل inset-block-start وinset-inline-end بدل top وright، لأن الخاصيتين المنطقيتين تتبعان اتجاه الصفحة فتنعكسان معه، أما top وright فثابتتان لا تتغيّران.

02

المطلوب

ضع .badge في أعلى .card عند حافة البداية، واجعلها تظهر فوق كل ما حولها.

الفحوص

5 فحوص
  1. البطاقة صارت مرجعًا بـ relative
  2. الشارة خرجت من مكانها الطبيعي بـ absolute
  3. الشارة في أعلى البطاقة وليست في وسطها
  4. الشارة عند حافة البداية
  5. للشارة z-index فلا تختفي تحت غيرها
03

تلميحات

0/3
دروس المسارأتممت 0 من 8

تتعمّق في نموذج الصندوق والمتغيّرات والتموضع واستعلامات الحاوية وغيرها، لتفهم ما يجري خلف التنسيق الذي تراه.

مستواه متوسّط، وفيه 8 دروس مجموع مدّتها ساعة ونصف.

index.html
المعاينة
index.html100%
–/5

اضغط «تشغيل وتصحيح» ليبدأ الفحص.

تجد 5 فحوص في بطاقة «المطلوب».

دروس المسارأتممت 0 من 8

تتعمّق في نموذج الصندوق والمتغيّرات والتموضع واستعلامات الحاوية وغيرها، لتفهم ما يجري خلف التنسيق الذي تراه.

مستواه متوسّط، وفيه 8 دروس مجموع مدّتها ساعة ونصف.