ماذا تفعل position: absolute في CSS؟

position: absolute يحدد موقع العنصر بالنسبة لأقرب أب له موضع (relative أو absolute أو fixed أو sticky). وإذا لم يوجد، فبالنسبة للصفحة.

.card {
  position: relative;
}

.card .badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
}

ماذا يحدث للعنصر؟

• يخرج من تدفق الصفحة: العناصر الأخرى تتصرف كأنه غير موجود.
• يتموضع بـ top وleft وأخواتهما.

لا يتحرك وحده، ولا يوسّط تلقائيًا. وللعنصر الثابت أعلى الشاشة نستخدم fixed أو sticky.