الدرس 3 من 8
التموضع
- 14 دقيقة
- 5 معايير للتصحيح
- 3 تلميحات
- إلى المطلوب
هدف الدرس
عنصر فوق عنصر
01
الشرح
position: absolute يخرج العنصر من التدفّق ويضعه بالنسبة إلى أقرب جدّ متموضع — أي جدّ قيمته ليست static.
وهذه هي الحيلة كلّها: تضع position: relative على الأب لتجعله مرجعًا، ثم absolute على الابن. بلا الأول يهرب الابن إلى زاوية الصفحة.
واستعمل inset-block-start وinset-inline-end بدل top وright: الأولى تنقلب مع اتجاه الصفحة، والثانية لا.
02
المطلوب
ضع .badge في الزاوية العليا من حافة البداية داخل .card، فوق كل شيء.
معايير التصحيح
5 معايير- البطاقة مرجع متموضع
- الشارة خارج التدفّق بـ absolute
- الشارة عند أعلى البطاقة لا في وسطها
- الشارة عند حافة البداية
- z-index مضبوط فلا يختفي تحت غيره