الدرس 3 من 8

التموضع

هدف الدرس

عنصر فوق عنصر

01

الشرح

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

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

واستعمل inset-block-start وinset-inline-end بدل top وright: الأولى تنقلب مع اتجاه الصفحة، والثانية لا.

02

المطلوب

ضع .badge في الزاوية العليا من حافة البداية داخل .card، فوق كل شيء.

معايير التصحيح

5 معايير
  1. البطاقة مرجع متموضع
  2. الشارة خارج التدفّق بـ absolute
  3. الشارة عند أعلى البطاقة لا في وسطها
  4. الشارة عند حافة البداية
  5. z-index مضبوط فلا يختفي تحت غيره
index.html
المعاينة
index.html100%
–/5

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

5 معايير في بطاقة «المطلوب».