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