position: relative;

يحرك العنصر إلى موضع جديد بالنسبة لموضعه الأصلي عن طريق كتابة

top: XX; لتحريكه مسافة XX من القمة

right:XX; لتحريكه مسافة XX من اليمين

bottom:XX; لتحريكه مسافة XX من القاع

left:XX; لتحريكه مسافة XX من اليسار

فمثلاً إن كتبت

position: relative;

top: 32px;

سيتحرك العنصر مسافة 32 بكسل عن القمة(أي إلى أسفل) بالنسبة لموقعه الأصلي

position: absolute;

يحرك العنصر بالنسبة لحدود العنصر الاب الحاوي له الذي له position: relative; فإن لم يجد فيكون بالنسبة للصفحة

وأيضاً يأخذ القيم top: XX; right:XX; bottom:XX; left:XX; لتحديد البعد

لفهم هذه النقطة

بالنسبة لحدود العنصر الاب الحاوي له فإن لم يجد فيكون بالنسبة لشاشة المتصفح

هذا مثال

لنفرض أن العنصر أخذ هذه القيم

position: absolute;

top:5px;

right:5px;

فلدينا توقعين

إما أن يكون العنصر موضوع داخل عنصر آخر(مثلاً داخل div) وهذا الآخر قد أخذ قيمة position: relative;

فسيكون العنصر الداخلي على بعد 5 بكسل من قمة ويمين العنصر الخارجي (div)

أما الاحتمال الثاني ألا يوجد عنصر أب له position: relative;

هنا سيكون العنصر على بعد 5 بكسل من قمة ويمين الصفحة نفسها

إن اختلط عليك الأمر انظر هذا الفيديو فشرحه سهل وسلس

ملحوظة : الشرح في الفيديو بالعامية المصرية