position

خاصية تموضع العنصر position

خاصية position تخرج العنصر من التدفق الطبيعي وتموضعه: نسبيًا، مطلقًا داخل أب، مثبتًا بالشاشة، أو لاصقًا عند التمرير.

خمس شخصيات للتموضع: static التدفق الطبيعي (الافتراضي)، وrelative يزيح العنصر عن مكانه الأصلي مع حفظ فراغه، وabsolute يقتلعه ويموضعه نسبةً لأقرب أب positioned، وfixed يثبته بنافذة المتصفح مهما مرّرت، وsticky الهجين الذكي: طبيعي حتى تصل حافته حدًا محددًا فيلتصق (ترويسة هذا الموقع مثال حي).

القاعدة التي يجهلها المبتدئون: absolute يبحث عن أقرب أب له position غير static — لذلك العرف الشائع: relative على الأب وabsolute على الابن.

الصياغة

selector {
  position: absolute; /* static | relative | fixed | sticky */
  top: 0; inset-inline-end: 0;
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .parent { position: relative; height: 120px; background: #ede9fe; border-radius: 10px; }
  .badge { position: absolute; top: 8px; left: 8px; background: #7c5cff; color: white; padding: 4px 10px; border-radius: 99px; font-size: 13px; }
</style>
<div class="parent">
  <span class="badge">absolute داخل relative</span>
</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
relative	إزاحة عن المكان الأصلي + يصبح مرجعًا لأبنائه المطلقين
absolute	اقتلاع وتموضع نسبة لأقرب أب positioned
fixed	تثبيت بنافذة المتصفح — أزرار عائمة وأشرطة دائمة
sticky	طبيعي ثم يلتصق عند حد top المحدد — ترويسات الجداول والأقسام
top / bottom / inset-inline-start...	إحداثيات التموضع (النسخ المنطقية تحترم RTL)

💡 نصائح عملية

الوصفة الأشهر بالويب: relative للأب + absolute للابن (شارة فوق بطاقة)
sticky لا يعمل غالبًا بسبب overflow مخفي على أحد الأجداد — أول ما تفحصه

⚠️ أخطاء شائعة

absolute بلا أب positioned فيهرب العنصر لتموضع نسبة للصفحة كلها
بناء تخطيط كامل بـ absolute — هش وينكسر بأي محتوى متغير؛ التخطيط لـ flex/grid

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs